再找个有意思点的例子，我们经常看到一些3D的看房软件，而我这文集目标也是奔着这种软件去的。
上个假图
参照京东的大牛写的一些例子
绘制旋转的立方体，并自动隐藏正面(只渲染背面)
<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>
</body>
<script src="three/build/three.js"></script>
<script>
// 获取浏览器窗口的宽高，后续会用
var w = window.innerWidth
var h = window.innerHeight
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 800);
// 设置摄像机位置，并将其朝向场景中心
camera.position.x = 0
camera.position.y = 10
camera.position.z = 30
camera.lookAt(scene.position)
var renderer = new THREE.WebGLRenderer({
antialias: true //是否开启抗锯齿
})
renderer.setClearColor(0xffffff)
renderer.setSize(w, h)
document.body.appendChild(renderer.domElement)
//创建内部立方体
var innerBoxGeomerty = new THREE.BoxGeometry(4, 4, 4)
var innerBoxMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlaShading,
side: THREE.DoubleSide
})
var innerBox = new THREE.Mesh(innerBoxGeomerty, innerBoxMaterial)
innerBox.position.y = -2.9
scene.add(innerBox)
var boxGeometry = new THREE.BoxGeometry(10,10,10)
var materials = [
new THREE.MeshBasicMaterial({color:0xff0000}),
new THREE.MeshBasicMaterial({color:0x00ff00}),
new THREE.MeshBasicMaterial({color:0x0000ff}),
new THREE.MeshBasicMaterial({color:0x000000}),
new THREE.MeshBasicMaterial({color:0x00ffff},{transparent:true,opacity:1}),
new THREE.MeshBasicMaterial({color:0xff0000}),
]
for (let i = 0; i < materials.length; i++) {
const material = materials[i]
//定义需要渲染的一面，值为常量，默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。
material.side = THREE.BackSide
//material.needsUpdate = true //关于：needsUpdate http://www.php.cn/html5-tutorial-6600.html
}
var boxMesh = new THREE.Mesh(boxGeometry,materials)
scene.add(boxMesh)
render()
function render() {
// 渲染，即摄像机拍下此刻的场景
renderer.render(scene, camera)
boxMesh.rotation.y += 0.01
innerBox.rotation.y += 0.01
requestAnimationFrame(render)
}
</script>
</html>
运行结果
网友评论