threejs基础示例

1 先打一个架子，这样容易写代码

先看一个结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head>
<body onload="draw();">
</body>
<script src="lib/three.js"></script>
<script src="lib/SceneUtils.js"></script>
<script src="lib/stats.min.js"></script>
<script src="lib/dat.gui.min.js"></script>
<script>//这里就是三维的代码写入
</script>
</html>

2 定义场景、相机、灯光

 var renderer;//渲染器function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setClearColor(new THREE.Color(0x000000)); renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}var camera;//相机function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.x = 0;camera.position.y = 40;camera.position.z = 50;camera.lookAt(new THREE.Vector3(0, 0, 0));}var scene;//场景function initScene() {scene = new THREE.Scene();}var light;function initLight() {scene.add(new THREE.AmbientLight(0x404040));light = new THREE.DirectionalLight(0xffffff);light.position.set(1, 1, 1);scene.add(light);}function initModel() {//模型var object = new THREE.AxesHelper(500);//scene.add(object);}

完整代码，直接复制可用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head>
<body onload="draw();">
</body>
<script src="lib/three.js"></script>
<script src="lib/SceneUtils.js"></script>
<script src="lib/stats.min.js"></script>
<script src="lib/dat.gui.min.js"></script>
<script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setClearColor(new THREE.Color(0x000000)); //renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.x = 0;camera.position.y = 40;camera.position.z = 50;camera.lookAt(new THREE.Vector3(0, 0, 0));}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {scene.add(new THREE.AmbientLight(0x404040));light = new THREE.DirectionalLight(0xffffff);light.position.set(1, 1, 1);scene.add(light);}function initModel() {//模型var object = new THREE.AxesHelper(500);//scene.add(object);}//状态var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//guivar controls,knot,loadedMesh;function initGui() {//controls = {"radius": 13,"tube": 1.7,"radialSegments": 156,"tubularSegments": 12,"p": 3,"q": 4,"heightScale": 3.5,"rotate": false,redraw: function () {// if (knot) scene.remove(knot);var geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale);knot = createMesh(geom);scene.add(knot);},save:function () {console.log(knot);var result = knot.toJSON();localStorage.setItem("json", JSON.stringify(result));},load:function () {scene.remove(loadedMesh);var json = localStorage.getItem("json");if (json) {var loadedGeometry = JSON.parse(json);var loader = new THREE.ObjectLoader();loadedMesh = loader.parse(loadedGeometry);loadedMesh.position.x -= 50;scene.add(loadedMesh);console.log(loadedMesh);}}};var gui = new dat.GUI();var loadFolder = gui.addFolder("存储");loadFolder.add(controls, "save");loadFolder.add(controls, "load");var meshFolder = gui.addFolder("参数");meshFolder.add(controls, 'radius', 0, 40).onChange(controls.redraw);meshFolder.add(controls, 'tube', 0, 40).onChange(controls.redraw);meshFolder.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw);meshFolder.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw);meshFolder.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw);meshFolder.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw);meshFolder.add(controls, 'heightScale', 0, 5).onChange(controls.redraw);meshFolder.add(controls, 'rotate');controls.redraw();}var step = 0;function render() {if (controls.rotate) {knot.rotation.y = step += 0.01;}renderer.render(scene, camera);}// function generateSprite() {var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var context = canvas.getContext('2d');var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);gradient.addColorStop(0, 'rgba(255,255,255,1)');gradient.addColorStop(0.2, 'rgba(0,255,255,1)');gradient.addColorStop(0.4, 'rgba(0,0,64,1)');gradient.addColorStop(1, 'rgba(0,0,0,1)');context.fillStyle = gradient;context.fillRect(0, 0, canvas.width, canvas.height);var texture = new THREE.Texture(canvas);texture.needsUpdate = true;return texture;}// 创建点云function createPointCloud(geom) {var material = new THREE.PointCloudMaterial({color: 0xffffff,size: 3,transparent: true,blending: THREE.AdditiveBlending,map: generateSprite(),depthTest: false});var cloud = new THREE.Points(geom, material);cloud.sortParticles = true;return cloud;}//meshfunction createMesh(geom) {//var meshMaterial = new THREE.MeshNormalMaterial({wireframe: true});meshMaterial.side = THREE.DoubleSide;//var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);return mesh;}//窗口重置function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {render();stats.update();requestAnimationFrame(animate);}function draw() {initRender();initScene();initCamera();initLight();initModel();initStats();initGui();animate();window.onresize = onWindowResize;}
</script>
</html>

其中的SceneUtil.js内容，其他两个stats.min.js dat.gui.min.js可以到网上下载，如若不想下载，可以直接我从的资源中下
//SceneUtils.js,读者可以更新自己的内容到这个里面，形成自己需要的lib

THREE.SceneUtils = {createMultiMaterialObject: function ( geometry, materials ) {var group = new THREE.Group();for ( var i = 0, l = materials.length; i < l; i ++ ) {group.add( new THREE.Mesh( geometry, materials[ i ] ) );}return group;},detach: function ( child, parent, scene ) {child.applyMatrix( parent.matrixWorld );parent.remove( child );scene.add( child );},attach: function ( child, scene, parent ) {child.applyMatrix( new THREE.Matrix4().getInverse( parent.matrixWorld ) );scene.remove( child );parent.add( child );}
};

3 注意

在窗口变换大小的时候，重新对视图进行更新，这样即使变动窗口，所有物体依然正常，所以加入窗口变化的事件 window.onresize = onWindowResize;
下面这个函数非常简单地解决了这个问题
//窗口重置

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}

4 完整htmljs下载

这里可以下载
threejs基础demo

threejs基础示例相关推荐

Python面向对象基础示例_创建对象
Python面向对象基础示例_创建对象 python是面向对象的语言,你可以很轻松的创建一个类和对象.本书代码源自<<Python 3 Object-Oriented Programmin ...
Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
运维之DNS服务器Bind9配置解析和基础示例及附带命令
0x03 Bind 配置解析实例1.DNS主从区域传输介绍与配置实例2.DNS区域传输限制实例3.DNS部分二级域名解析示例1.采用Bind建立一个A记录DNS服务器示例2.采用Bind建立 ...
【ThreeJS基础教程】0.在学习使用ThreeJS之前
[ThreeJS基础教程]0.在学习使用ThreeJS之前什么人适合学习ThreeJS 什么人不建议学习ThreeJS或学起来比较累了解ThreeJS ThreeJS文档在哪关于<Thre ...
Mybatis3基础示例
Mybatis3基础示例一.搭建流程总体项目结构: 1.Maven依赖 2.配置文件 Mybatis-config.xml 3.封装MybatisUtils工具类 4.其他二.CURD 1.接口 ...
Cocos2d-x 基础示例-精灵移动2
Cocos2d-x 基础示例-精灵移动2 先推荐一下红哥的精灵教程 http://blog.csdn.net/honghaier/article/details/8117903 红哥里面使用的ccTo ...
【ThreeJS基础教程-材质纹理篇】3.2 初识基础网格材质MeshStandardMaterial
初识标准网格材质学习ThreeJS的捷径了解材质的基本知识材质继承关系常用的通用材质属性 alphaTest的验证和应用 depthTest和depthWrite应用渲染哪一面Side 常用 ...
1. awk基础,awk介绍,awk基本语法,直接使用action,打印列,初识列和行,\$0、\$NF、NF,基础示例,begin模式,end模式
文章目录前言 awk介绍 awk基本语法直接使用action 打印列初识列和行 \$0.\$NF.NF 基础示例初识模式(begin end) 总结友情链接前言本小节是awk基础入门课程 ...
【ThreeJS基础教程-初识Threejs】1.2掌控我们的物体和模型
掌控我们的物体和模型学习ThreeJS的捷径引入帧数监控与调试时使用的GUI 案例解析引入刷新率检测器stats和lil-gui Stats LIL.GUI (Dat.GUI) 学习ThreeJ ...