THREE.JS 入门开始
创建一个“大漂亮的”正方体，步骤如下：
1.导入three.js的三维引擎
2.创建场景
3.创建网格模型（3D建模常见）
4.光源设置（分：点光源、环境光、平行光）
5.相机设置
6.创建相机
7.创建渲染对象
8.执行渲染操作（指定场景、相机作为参数）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">在这里插入代码片
<title>Three.Js自行测试</title>
<script type="text/javascript" src="./js/three.js"></script>
<style type="text/css">
body{overflow: hidden;margin: 0;}
</style>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
//1.创建场景
let scene = new THREE.Scene();
//2.创建网格模型与材质对象
let geometry = new THREE.BoxGeometry(150,150,150);//立方体
let material = new THREE.MeshLambertMaterial({color: 0x111133});//材料
let mesh = new THREE.Mesh(geometry,material);//创建网格模型对象
scene.add(mesh);
//3.创建光源（点光源与环境光）
let point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300);
let ambient = new THREE.AmbientLight(0x333333);
scene.add(point,ambient);
//4.创建相机并设置
let width = window.innerWidth;
let height = window.innerHeight;
let k = width / height;
let s = 350;
let camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
camera.position.set(200,300,200);
camera.lookAt(scene.position);
//5.创建渲染器对象
let render = new THREE.WebGLRenderer();
render.setSize(width,height);
render.setClearColor(0x556677,1);
document.body.appendChild(render.domElement);
render.render(scene,camera);
</script>
</html>
2756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
