看下官方文档入门例子，敲一下。熟悉代码与初步了解。
官方例子
提前准备：npm建立项目，使用node express简单启动
<html>
<head>
<title>场景、相机、渲染器</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
color: #ffffff
}
</style>
</head>
<body>
<div id="info">Description</div>
</body>
<script src="three/build/three.js"></script>
<script>
//场景
var scene = new THREE.Scene()
//摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) //视野角度、长宽比、远剪画面、近剪画面
//渲染器
var renderer = new THREE.WebGLRenderer();
//渲染尺寸
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//------------立方体绘制
var geometry = new THREE.BoxGeometry(1, 1, 1) // 立方体对象
var material = new THREE.MeshBasicMaterial({ //材质
color: 0x00ff00
})
var cube = new THREE.Mesh(geometry, material) //网格
scene.add(cube) //将包含立方体与材质的网格对象放入场景中
camera.position.z = 5 //移动摄像机
//-------------绘制线
var meterial_line = new THREE.LineBasicMaterial({
color: 0x0000ff
})
var geometry_line = new THREE.Geometry()
geometry_line.vertices.push(new THREE.Vector3(-2, 0, 0))
geometry_line.vertices.push(new THREE.Vector3(0, 2, 0))
geometry_line.vertices.push(new THREE.Vector3(2, 0, 0))
geometry_line.vertices.push(new THREE.Vector3(0, -2, 0))
geometry_line.vertices.push(new THREE.Vector3(-2, 0, 0))
var line = new THREE.Line(geometry_line, meterial_line)
scene.add(line)
//-------------绘制文字
var loader = new THREE.FontLoader()
loader.load('three/examples/fonts/helvetiker_regular.typeface.json', function (font) {
var geometry = new THREE.TextGeometry('Hello three', {
font: font,
size: 1,
height: 0,
curveSegments: 0,
// bevelEnabled: true,
// bevelThickness: 1,
// bevelSize: 1,
// bevelSegments: 1
});
//创建法向量材质
var meshMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlatShading,
transparent: true,
opacity: 0.9
});
var mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.position.set(-3, 2.5, 0);
scene.add(mesh);
});
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
line.rotation.x += 0.01
renderer.render(scene, camera) //场景与摄像机渲染
}
animate();
</script>
</html>
运行结果
小结：
1.首选需要创建场景、摄像机、渲染器。
2.绘制各种物体都会建立对应的对象，还需要有对应的材质对象。
3.使用THREE.Mesh生成绘制对象，输入到渲染器中
4.字体也是对象的对象，一般都需要引入对象的字体json文件，并在文件加载完成后才能进行渲染操作。
5.暂时尝试的材质的对象方式都可以互相用，只是非对应的材质应用会效果不佳。
网友评论