threejs对我很重要,因为它web可视化的基础,是进场的钥匙,而我正准备搞web可视化。
让我以一个立方体旋转为例子,讲讲threejs
首先,我们先从小明拍视频的故事来讲一下。
小明想拍一个立方体旋转的视频,首先它要有 相机
,用来拍照。他还要有合适的场景
,如果是垃圾堆可不行。然后就是主角 一个质感
的会旋转
的立方体
。为了拍的清晰,小明还专门找了一个光照
良好的晴天。然后小明准备开拍,他调整了 相机与立方体的距离
和画面的大小
,让视频更为合适。
代码如下:
/*
* @Author: pym
* @Date: 2022-01-04 11:51:03
* @LastEditors: pym
* @Description:
* @LastEditTime: 2022-09-17 01:33:12
*/
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import * as THREE from 'three';
// init
// 相机
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 0.5;
// 场景
const scene = new THREE.Scene();
// 几何体
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
// 材质
const material = new THREE.MeshNormalMaterial();
// 对象 需要几何对象 和 材质
const mesh = new THREE.Mesh(geometry, material);
// 把地图加入场景
scene.add(mesh);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置画布的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置动画
renderer.setAnimationLoop(animation);
// 把画布加入dom
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);
// animation()
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
console.log(time)
renderer.render(scene, camera);
}
// function start() {
// // fetch('/tripdocs/test/api', { method: 'POST' });
// }
// setTimeout(() => {
// start();
// }, 1000);
// function Three() {
// return
// }
// ReactDOM.render(<div className="app">qqq</div>, document.getElementById('root'));