最近在看threejs开发指南,总结一下制作最基础的3d场景的8步:

1. 设置场景大小
2. 创建WebGl渲染器
3. 指定根节点元素
4. 初始化场景
5. 添加相机到场景
6. 创建物体到场景
7. 添加光源到场景
8. 渲染
 
下面给出代码:
1. 设置场景大小
var WIDTH = 400, HEIGHT = 300;
 
2. 创建WebGl渲染器
var renderer = new THREE.WebGLRenderer({
     antialias:true    //抗锯齿
});
renderer.setClearColor(0xFFFFFF, 1.0);//设置canvas背景色
renderer.setSize(WIDTH, HEIGHT); // 启动渲染器
 
3. 指定根节点元素
var $container = $('#container');
$container.append(renderer.domElement);
 
4. 初始化场景
var scene = new THREE.Scene();
 
5. 添加相机到场景
// 设置相机属性
var VIEW_ANGLE = 45,  ASPECT = WIDTH / HEIGHT,  NEAR = 0.1, FAR = 10000;
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE ,ASPECT ,NEAR ,FAR );
scene.add(camera);
camera.position.z = 300;
 
6. 创建物体到场景
// 设置球体参数
var radius = 50,segments = 16,rings = 16;
//球体材质 
var sphereMaterial = new THREE.MeshLambertMaterial({  color: 0xCC0000 }); 
// 创建球体 
var geometry = new THREE.SphereGeometry( radius, segments, rings);
var sphere = new THREE.Mesh(geometry , sphereMaterial);
scene.add(sphere);
 
7. 添加光源到场景
var light = new THREE.DirectionalLight(0xffffff, 1.0, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景
 
8. 渲染
renderer.render(scene, camera);

threejs 入门教程1的更多相关文章

  1. threejs构建web三维视图入门教程

    本文是一篇简单的webGL+threejs构建web三维视图的入门教程,你可以了解到利用threejs创建简单的三维图形,并且控制图形运动.若有不足,欢迎指出. 本文使用的框架是three.js gi ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Content Security Policy 入门教程

    阮一峰文章:Content Security Policy 入门教程

  6. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  7. UE4新手引导入门教程

    请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf

  8. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  9. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

随机推荐

  1. 2.linux系统命令详解

    1 shell shell:命令解释器,根据输入的命令执行相应命令. 1.1 shell家族 察看当前系统下有哪些shell: cat /etc/shells 察看当前系统正在使用的shell ech ...

  2. [转]Linux常用命令学习

    转自 https://www.cnblogs.com/gaojun/p/3359355.html 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文 ...

  3. BZOJ 1500 splay终结版...

    GSS系列有一丝丝像- 只不过那个是线段树 这个是splay 翻转 插入 删除啥的就是普通的splay 合在一起了而已 //By SiriusRen #include <cstdio> # ...

  4. String or binary data would be truncated 异常解决办法 .

    原因:一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大解决:修改表结构,使表字段大小相同或大于要插入的数据

  5. H5自带进度条&滑块

    一.H5自带进度条 <div id="d1"> <p id="pgv">进度:0%</p> <progress id= ...

  6. input上传文件检测文件大小

    前几天在做 input[type='file'] 上传图片时,需要检测上传文件的内存大小,写了一个小demo,在此做一总结: <!DOCTYPE html> <html lang=& ...

  7. 三种排序方法(c语言)

    #include "stdio.h" void main() {void read_data(int a[],int n); void write_data(int a[],int ...

  8. 用replaceState操作路由的方法封装

    export class Router { ReplaceState(url, data) { var query = this.Generate(data); window.history.repl ...

  9. 达夫设备之js

    最近阅读<高性能JavaScript>时,在书中的“达夫设备“ . 对此,有些感悟,同时有些疑问,希望看到的朋友,能帮忙解释下,在此先提前感谢了. 1. 先说自己的理解吧: ”达夫设备“的 ...

  10. javascript中手风琴特效

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