最近在看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. Regexp-Utils:身份证号校验

    ylbtech-Regexp-Utils:身份证号校验 1.返回顶部 1.方法 var idCardNoUtil = { /*省,直辖市代码表*/ provinceAndCitys: { 11: &q ...

  2. 使用最新vue_cli+webpack搭建的模版

    使用最新vue_cli+webpack搭建的模版,包含了常用的插件,router和axiox与测试插件.项目的结构如下: 框架下载地址:https://share.weiyun.com/5Cl7EbU

  3. Android使用Dribble Api

    使用Dribble提供的Api获取上面的设计分享 使用了Material Design.SceneTransitionAnimation 使用了Volley Gson 1. 申请Dribble开发者应 ...

  4. innobackupex: Error: --decompress requires qpress

    数据库版本:5.6.16​系统版本:cenos 6.5​​通过percona-xtranbackup恢复数据库报错(软件版本:percona-xtrabackup-2.1.9-744.rhel6.x8 ...

  5. hdu 1532 Drainage Ditches 【ISAP 】

    还是不是很懂算法 先存一个模板先吧--- 看的这篇学的-- http://www.renfei.org/blog/isap.html #include<cstdio> #include&l ...

  6. 理解UIView的绘制-孙亚洲

    前言 最近研究OpenGL ES相关和 GPU 相关 发现这篇文章很具有参考的入门价值. 理解 UIView 的绘制, UIView 是如何显示到 Screen 上的? 首先要从Runloop开始说, ...

  7. https://blog.csdn.net/sxf359/article/details/71082404

    https://blog.csdn.net/sxf359/article/details/71082404

  8. EntityFramework 二

    特性 用来具体的设置数据库属性   [Table("表名")]//设置表名 public class User { [Key] //设置主键 [Column("列名&qu ...

  9. Linux后台开发应该具备技能

    一.linux和os: 1.命令:netstat tcpdump ipcs ipcrm 这四个命令的熟练掌握程度基本上能体现实际开发和调试程序的经验 2.cpu 内存 硬盘 等等与系统性能调试相关的命 ...

  10. C文件I/O超详细教程

    本文主要参考了C Primer Plus (5th & 6th Edition) 您可以选择本文的部分内容来读,有些内容对于不熟悉MS-DOS的读者可能过于晦涩难懂. C语言文件基本知识 文件 ...