接下來(lái)语御，需要構(gòu)建基礎(chǔ)的three.js環(huán)境
一袁勺，創(chuàng)建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
*{overflow:hidden}
</style>
<title>Three基礎(chǔ)測(cè)試</title>
</head>
<body>
<div id='root' />
</body>
<script src="./index.js"></script>
</html>
如上柱徙，采用cdn的three.js庫(kù)
二缓屠，構(gòu)建index.js
// import THREE from 'three'
window.onload = function () {
console.log("this Root verion:", THREE.REVISION)
const R = 200;
var Root = {
W: window.innerWidth,
H: window.innerHeight,
Root: document.getElementById('root'),
}
var renderer = new THREE.WebGLRenderer({ antialias: true })
//建議設(shè)置大小，否則會(huì)出現(xiàn)鋸齒护侮，也可能是因?yàn)槲覜](méi)有設(shè)置div具體寬高
renderer.setSize(window.innerWidth, window.innerHeight);
Root.Root.appendChild(renderer.domElement)
//創(chuàng)建場(chǎng)景
var scene = new THREE.Scene();
//添加光源
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 150, 0);
scene.add(light);
// 添加輔助線
var axisHelper = new THREE.AxisHelper(800);
scene.add(axisHelper);
//添加相機(jī)
var camera = new THREE.PerspectiveCamera(60, Root.W / Root.H, 0.1, 2000);
camera.position.set(0, 0, 1000);
camera.lookAt(scene.position);
scene.add(camera);
//添加組
var groupSphere = new THREE.Group();
function animate() {
renderer.setSize(window.innerWidth, window.innerHeight);
//重復(fù)渲染
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
}
三敌完，關(guān)于Threejs的提示
個(gè)人習(xí)慣使用VSCode，但它需要配置一下才能出現(xiàn)提示
- npm安裝ThreeJS庫(kù)
cnpm i three -s
- 代碼首行加入
import THREE from 'three' - 測(cè)試時(shí)則需要注釋掉
