Three.js 基础
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import gsap from 'gsap';
import * as dat from 'dat.gui'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMatreial = new THREE.MeshBasicMaterial({color: 'red'});
const cube = new THREE.Mesh(cubeGeometry, cubeMatreial);
cube.rotation.set(Math.PI / 4, 0, 0)
scene.add(cube);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const clock = new THREE.Clock();
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
function render () {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
const animate = gsap.to(cube.position, { x: 5, duration: 5,
yoyo: true,
repeat: 2,
delay: 2,
onStart: () => {
console.log('动画开始');
},
onComplete: () => {
console.log('动画结束')
}
});
gsap.to(cube.rotation, { y: 2 * Math.PI, duration: 5,
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
});
window.addEventListener('dblclick', () => {
const fullScreenElement = document.fullscreenElement;
if (!fullScreenElement) {
renderer.domElement.requestFullscreen();
} else {
document.exitFullscreen();
}
})
const gui = new dat.GUI();
gui
.add(cube.position, 'x')
.min(0)
.max(5)
.step(0.01)
.onChange(value => {
console.log('x轴值被修改为:', value);
})
.onFinishChange(value => {
console.log('最后x轴值被修改为:', value);
})
const params = {
color: '#ffff00',
fn: () => {
gsap.to(cube.position, {y: 6, duration: 2, yoyo: true, repeat: -1})
}
};
gui.addColor(params, 'color').onChange((value) => {
console.log('变化后颜色为:', value);
cube.material.color.set(value);
})
gui.add(cube, 'visible').name('是否显示');
gui.add(params, 'fn').name('立方体运动');
var folder = gui.addFolder('设置立方体');
folder.add(cube.material, 'wireframe');
几何体
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import gsap from 'gsap';
import * as dat from 'dat.gui'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
scene.add(camera);
for (let i = 0; i < 50; i++) {
const geometry = new THREE.BufferGeometry();
const positionArray = new Float32Array(9);
for (let j = 0; j < 9; j++) {
positionArray[j] = Math.random() * 5;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3));
let color = new THREE.Color(Math.random(), Math.random(), Math.random());
const matreial = new THREE.MeshBasicMaterial({color: color});
const cube = new THREE.Mesh(geometry, matreial);
scene.add(cube);
}
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerWidth);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
function render () {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
纹理
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
scene.add(camera);
const textureLoader = new THREE.TextureLoader();
const door = textureLoader.load('../assets/image/door.jpeg');
console.log(door)
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
const basicMaterial = new THREE.MeshBasicMaterial({
color: '#ffff00',
map: door
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerWidth);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
function render () {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();