three.js第二篇【场景创建】

来源：互联网发布：淘宝女装前十名店铺编辑：程序博客网时间：2024/05/14 05:22

上一篇大概讲了一下three.js是什么东西，本节给大家介绍以下几个点：

1，能做什么？
2，做了什么？
3，怎么做？

1，能做什么？
游戏、虚拟漫游场景、产品三维展示等都可以，只要有人说：如果谁可以在网页里面做一个无需插件的3D场景，我就给他投资1个亿，那你可以站出来了!轻松融资1个亿！

2，做了什么？
看three.js提供的在线案例吧大家可以看看案例：https://threejs.org/

3，怎么做？
第一步：打开https://threejs.org/；
第二步：点击左侧面板中的“source code”，three.js的github页面被打开；
第三步：下载ZIP文件到本地；
下载完、解压后的目录如下：[pic3]
在该目录下，创建mytest.js即可开始创建你的3D场景了！

官方文档，在https://threejs.org/左侧第一行“documentation”,地址是：https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene

下面我们测试第一个three.js实例.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>第一个three.js脚本</title>

<style >
body{
margin:0;
}
canvas{
width:100%;
height:100%;
}
</style>
</head>
<body>

<script src="../build/three.js"> </script>

<script type="text/javascript" >
// 开始你的three.js脚本
//
// 声明场景、相机、渲染器
var scene ,camera, renderer;
// 构造场景，无参数
scene=new THREE.Scene();

// 相机有多种，以后详细介绍；
// 这里我们构造透视相机，4个参数分别是：
// 视野角fov , 长宽比aspect【宽度/高度，】，视锥体渲染最小值，视锥体最大值
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
//构造渲染器
renderer=new THREE.WebGLRenderer();
// 设定渲染尺寸，这里选定窗口尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
//渲染缓存颜色。不做处理，场景背景是黑色的。这里设定白色。
//renderer.setClearColor(0xFFFFFF,1);
//定义几何体，cube ：3D立方体
//构造自带Box几何体，长宽高1,1,1
var geometry = new THREE.BoxGeometry(1,1,1);
//需要制定几何体材质，3D里面的概念。需要给几何体制定一个材质，并给一个颜色。
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
//构造一个cube几何体，指定几何信息和材质
var cube=new THREE.Mesh(geometry,material);
// 加入到场景中去
scene.add(cube);
// 相机位置调远，保证可以看到 3D立方体
camera.position.z=5;
// 最后。。。。必须要把渲染的元素加入到html文档里面，这样才能显示！
document.body.appendChild(renderer.domElement);
// 这里是循环渲染。保证显卡每一帧都要渲染场景里面的物体！
function render(){

requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render(scene,camera);
}
render();
</script>
</body>
</html>

0 0