z-fight prevent
by Herst
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/Herst/three.js/OrbCtrlPanRestrExample/examples/js/controls/OrbitControls.js"></script>
CSS
body {
overflow: hidden;
}
JavaScript
debugger;
var camera, renderer, controls;
var floor, line1, line2, box;
var scene;
var i;
init();
render();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(150, 450, 450);
scene = new THREE.Scene();
floor = new THREE.Mesh(
new THREE.PlaneGeometry(500, 500),
new THREE.MeshBasicMaterial({
color: 0xffffff,
depthWrite: false
}));
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
var bridgeGeom = new THREE.Geometry();
bridgeGeom.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(30, 0, 0),
new THREE.Vector3(30, 30, 0),
new THREE.Vector3(0, 30, 0),
new THREE.Vector3(30, 60, 20),
new THREE.Vector3(0, 60, 20),
new THREE.Vector3(30, 90, 20),
new THREE.Vector3(0, 90, 20),
new THREE.Vector3(30, 120, 0),
new THREE.Vector3(0, 120, 0),
new THREE.Vector3(30, 150, 0),
new THREE.Vector3(0, 150, 0));
bridgeGeom.faces.push(
new THREE.Face3(0, 1, 2),
new THREE.Face3(0, 2, 3),
new THREE.Face3(3, 2, 4),
new THREE.Face3(3, 4, 5),
new THREE.Face3(5, 4, 6),
new THREE.Face3(5, 6, 7),
new THREE.Face3(7, 6, 8),
new THREE.Face3(7, 8, 9),
new THREE.Face3(7, 6, 8),
new THREE.Face3(7, 8, 9),
new THREE.Face3(9, 8, 10),
new THREE.Face3(9, 10, 11)
);
bridgeGeom.center();
line1 = new THREE.Mesh(bridgeGeom,
new THREE.MeshBasicMaterial({
color: 0xff0000,
depthTest: false
}));
line1.rotation.x = -Math.PI / 2;
line1.translateX(10);
scene.add(line1);
line2 = new THREE.Mesh(bridgeGeom,
new THREE.MeshBasicMaterial({
color: 0x00000ff,
depthTest: false
}));
line2.rotation.x = -Math.PI / 2;
line2.translateX(-10);
scene.add(line2);
box = new THREE.Mesh(new THREE.BoxGeometry(30, 30, 30),
new THREE.MeshBasicMaterial({
...