首页分享 threejs入门

threejs入门

来源：花匠小妙招时间：2024-12-24 10:07

今年刚刚接触threejs。这玩意封装得挺不错。为了使大家感观上能够了解threejs.这里直接分享一段代码。看完就知道threejs的套路了。所有的学习资料，源代码，从github上已经足够。5000多的源码分享，天啊。。。

https://github.com/search?q=threejs

有几个例子也比较好的：https://github.com/luosijie/threejs-examples

以下一个案例，配置运行起来可以直接了解到threejs的结构。threejs的JS引用文件自己去官方找。https://threejs.org/

效果示意图：

<!DOCTYPE html>

<head>

<title>three.js webgl - Simple text from json</title>

<style>

body {

font-family: Monospace;

background-color: #f0f0f0;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 10px;

width: 100%;

text-align: center;

}

</style>

</head>

<body>

var camera, scene, renderer;

var components = [];

var selComps = [];

var controls;

var mouseInfo;

var tube;

var ptone;

initComp();

animate();

function initComp() {

document.addEventListener('mousedown', onDocumentMouseDown, false);

document.addEventListener('mousemove', onDocumentMouseMove, false);

document.addEventListener('mouseup', onDocumentMouseUp, false);

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);

camera.up.set(0, 1, 0);

controls = new THREE.OrbitControls(camera);

scene = new THREE.Scene();

camera.position.set(100,100,100);

scene.position = new THREE.Vector3(0,0,0);

scene.up = new THREE.Vector3(0,0,1);

dxplane();

cube();

sphere();

cylinder();

var axes = new THREE.AxisHelper(100);

scene.add(axes);

controls.update();

var ambientLight = new THREE.AmbientLight(0x606060);

scene.add(ambientLight);

var directionalLight = new THREE.DirectionalLight(0xffffff);

directionalLight.position.set(1, 0.75, 0.5).normalize();

scene.add(directionalLight);

scene.background = new THREE.Color(0xffffff);

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize, false);

}

function initLight() {

scene.add(new THREE.AmbientLight(0x444444));

light = new THREE.DirectionalLight(0xffffff);

light.position.set(0, 0, 0);

light.castShadow = true;

light.shadow.camera.top = 10;

light.shadow.camera.bottom = -10;

light.shadow.camera.left = -10;

light.shadow.camera.right = 10;

light.castShadow = true;

scene.add(light);

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

requestAnimationFrame(animate);

render();

}

function render() {

if (renderer)

renderer.render(scene, camera);

}

function onDocumentMouseDown(event) {

console.log(event);

if (event.button != 0) return;

mouseInfo = { start: [event.x, event.y] };

}

function onDocumentMouseUp(event) {

if (event.button != 0) return;

if (event.x - mouseInfo.start[0] != 0 || event.y - mouseInfo.start[1] != 0) return;

var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);

vector = vector.unproject(camera);

var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

var intersects = raycaster.intersectObjects(components);

console.log(intersects)

if (selComps.length > 0) {

selComps[0].object.material.transparent = false;

selComps[0].object.material.opacity = 1;

selComps = [];

}

if (intersects.length > 0) {

intersects[0].object.material.transparent = true;

intersects[0].object.material.opacity = 0.5;

selComps.push(intersects[0]);

}

function onDocumentMouseMove(event) {

if (controls.showRay) {

var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);

vector = vector.unproject(camera);

var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

var intersects = raycaster.intersectObjects(components);

if (intersects.length > 0) {

var points = [];

points.push(new THREE.Vector3(-30, 39.8, 30));

points.push(intersects[0].point);

var mat = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.6 });

var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 60, 0.001);

if (tube) scene.remove(tube);

if (controls.showRay) {

tube = new THREE.Mesh(tubeGeometry, mat);

scene.add(tube);

}

function dxplane() {

var planeGeo = new THREE.PlaneGeometry(100, 100, 10, 10);

var planeMat = new THREE.MeshLambertMaterial({

color: 0x666666,

wireframe: false

});

var planeMesh = new THREE.Mesh(planeGeo, planeMat);

planeMesh.position.set(0, 0, -20);

planeMesh.rotation.x = -0.5 * Math.PI;

scene.add(planeMesh);

}

function cube() {

var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);

var cubeMat = new THREE.MeshLambertMaterial({

color: 0x003300,

wireframe: false

});

var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);

cubeMesh.position.set(20, 10, 0);

scene.add(cubeMesh);

}

function sphere() {

var sphereGeo = new THREE.SphereGeometry(16, 40, 40);

var sphereMat = new THREE.MeshLambertMaterial({

color: 0x0000FF,

wireframe: false

});

var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);

sphereMesh.position.set(-25, 10, 0);

scene.add(sphereMesh);

}

function cylinder() {

var cylinderGeo = new THREE.CylinderGeometry(15, 15, 40, 40, 40);

var cylinderMat = new THREE.MeshLambertMaterial({

color: 0xFF6600,

wireframe: false

});

var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);

cylinderMesh.position.set(0, 20, -40);

cylinderMesh.up.set(0, 0, 1);

scene.add(cylinderMesh);

}

</script>

</body>

</html>

threejs入门

推荐分享

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！

threejs入门

推荐分享

家庭养花风水知识 家庭养花“五行说”

家庭养花知识大全 家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识 】养花须知：新手养花的选购技巧，不要当冤大头！

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！