最近在看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. When Cyber Security Meets Machine Learning 机器学习 安全分析 对于安全领域的总结很有用 看未来演进方向

    链接:http://ucys.ugr.es/jnic2016/docs/MachineLearning_LiorRokachJNIC2016.pdf https://people.eecs.berke ...

  2. webstorm配置Monokai-Sublime.jar主题

    https://github.com/OtaK/jetbrains-monokai-sublime 导入下载的Monokai-Sublime.jar jar包即可使用.

  3. 在Ubuntu Server下搭建LAMP环境

    1 LAMP的安装 LAMP通常是指Linux+Apache+MySQL+PHP组合形成的一套可以运行PHP程序的体系,并不是一个软件的名称.没有安装MySQL的服务器依然可以在其它条件完备的情况下运 ...

  4. Android Studio 插件 GsonFormat :你还在烦恼 为 Json格式 生成 JavaBean实体类吗?

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  5. 彻底解决降级安装失败无法彻底卸载应用bug

    彻底解决魅族手机无法彻底卸载应用bug使用Flyme系统的同学可能会遇到一个问题:卸载了某些软件(例如通过开发者模式调试安装的应用)后,实际这个应用还残留在系统,当你用低版本或者其他签名的apk覆盖安 ...

  6. C#中SQL参数传入空值报错解决方案

    C#中的null与SQL中的NULL是不一样的,SQL中的NULL用C#表示出来就是DBNull.Value. 注意:SQL参数是不能接受C#的null值的,传入null就会报错. 下面我们看个例子: ...

  7. UVa 10106 Product 【大数相乘】WA

    虽然是错的代码,但是还是想贴出来,最开始WA发现是没有考虑到乘积为0的情况,后来把a*0,0*a,a*0---0(若干个0),0--0(若干个0)*a都考虑进去了:可是还是WA,实在不懂先留在这儿. ...

  8. Springboot统一异常处理(@ControllerAdvice)

    import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind ...

  9. 在Eclipse中使用Maven将项目(包括Maven引入的依赖jar文件)打成jar文件

    1.  在项目的pom.xml文件中引入以下配置: <build> <plugins> <plugin> <artifactId>maven-assem ...

  10. (56) 解决字段设为readonly无法保存

    问题描述:当一个字段设为readonly =True 后,在form表单,即使你用onchange方法改变了值但也不能保存到数据库当时.平时在这样的要求,form表单有些字段要展示给用户,但又要达到不 ...