<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./three.js"></script>

    <title>Document</title>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px"></canvas>

</body>

<script>

    function init() {

        var renderer = new THREE.WebGLRenderer({

            canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(30, 400 / 300, 1, 10);

        camera.position.set(4, 3, 5);

        scene.add(camera);

        var cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

        );

        scene.add(cube);

        camera.lookAt(new THREE.Vector3(0, 0, 0))

        renderer.render(scene, camera);

    }

</script>

</html>

　　

《Three.js 入门指南》2.4.1- 照相机 - 透视投影demo的更多相关文章

  1. 系列博文-Three.js入门指南(张雯莉)-照相机

    照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自 ...

  2. 《Three.js 入门指南》2.3.1- 照相机 - 正交投影demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  4. 《Three.js 入门指南》0 - 说明

    本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...

  5. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  6. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  7. 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件（轨道控制）实现模型控制

    3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...

  8. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

随机推荐

  1. bootstrap table分页跳转到第一页

    1.destroy后重新初使化表格,可以将表格初始化封装为一个函数,destory后重新调用该函数进行初始化: 2.使用url刷新表格,$('#table').bootstrapTable('refr ...

  2. Golang package轻量级KV数据缓存——go-cache源码分析

    作者:Moon-Light-Dream 出处:https://www.cnblogs.com/Moon-Light-Dream/ 转载:欢迎转载,但未经作者同意,必须保留此段声明:必须在文章中给出原文 ...

  3. 【图文+视频新手也友好】Java一维数组详细讲解（内含练习题答案+详解彩蛋喔~）

    目录 视频讲解: 一.数组的概述 二.一维数组的使用 三.Arrays工具类中的sort方法(sort方法用的多,我们具体讲一下) 四.数组中的常见异常 五.一维数组练习题 六.彩蛋(本期视频使用的P ...

  4. 个人项目作业（wc.exe)

    1.GitHub项目地址 https://github.com/QiuBin666/WC 项目介绍: 题目描述 Word Count1. 实现一个简单而完整的软件工具(源程序特征统计程序).2. 进行 ...

  5. 菜鸟对java和Go的理解

    1.go对比java go通过结构体嵌套+接口实现类似面向对象中的继承和多态.个人认为尤其是go的接口抓住了多态的本质.而Go提倡的面向接口的思想也可能使得架构上更加解耦. 2.关于Go不要通过共享内 ...

  6. JDK dump

    1. 查看整个JVM内存状态 jmap -heap 1237(pid) 2.生成dump文件 jmap -dump:file=文件名.dump 1237(pid)

  7. MySQL数据备份与恢复(二) -- xtrabackup工具

    上一篇介绍了逻辑备份工具mysqldump,本文将通过应用更为普遍的物理备份工具xtrabackup来演示数据备份及恢复的第二篇内容. 1.  xtrabackup 工具的安装 1.1  安装依赖包 ...

  8. Ubuntu16.04安装QQ机器人

    Ubuntu安装QQ机器人 看了看现在QQ机器人似乎只有酷Q机器人有Docker可以在linux上运行了 那就k开始装酷Q机器人,资源占用也不是很大,大概占用180M内存吧 安装酷Q HTTP 首先安 ...

  9. 基于Modbus三种CRC16校验方法的性能对比

    目录 1.背景介绍 2. CRC校验的三种方法 2.1. 直接计算CRC校验 2.2. 查短表法计算CRC16校验 2.3.查大表法计算CRC16校验 3.三种校验方式的测试方法 3.1.直接计算CR ...

  10. Android应用开发基本流程

    Android应用开发流程 应用规划及架构设计 开发应用程序的步骤 项目有哪些功能. 需要哪些必要的界面及界面之间跳转的流程. 需要的数据及其数据的来源和格式. 是否需要服务器端的支持. 是否需要本地 ...