使用Three.js创建3d主页

步骤:

1. npm init vite

2. go to myportfolio, npm install three

3. npm install three

在main.js里面可以写出如下代码，获得一个可以动的不断旋转的物体。

import './style.css'

import * as THREE from 'three';

// Scene is the container

const scene = new THREE.Scene();

/**

* Multiple camera types:

* 1) ArrayCamera

* 2) Camera

* 3) CubeCamera

* 4) OrthographicCamera

* 5) PerspectiveCamera

* 6) StereoCamera

*

* PerspectiveCamera is the one to mimic eyeball

*

* */

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#bg'),

})

renderer.setPixelRatio(window.devicePixelRatio);

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

camera.position.setZ(30);

renderer.render(scene, camera);

// Geometry => {x,y,z} points that makeup a shape

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);

// Material of the object

const material = new THREE.MeshBasicMaterial({color: 0xFF6347, wireframe: true});

const tours = new THREE.Mesh(geometry, material);

scene.add(tours);

// recursive function that calls .render() automatically

function animate() {

requestAnimationFrame(animate);

tours.rotation.x += 0.01;

tours.rotation.y += 0.005;

tours.rotation.z += 0.01;

renderer.render(scene, camera);

}

animate();