<div class="item">
    <div id="THREE20"></div>
  </div>

  mounted() {
    this.initThreejs();
  },

    initThreejs() {
      let camera, scene, renderer;
      init();
      animate();
      function init() {
        ...
      }
      function animate() {
        ...
      }
    }

const container = document.getElementById("THREE20");

camera = new THREE.PerspectiveCamera(
  50,
  (window.innerWidth - 201) / window.innerHeight,
  0.1,
  500
);
camera.position.x = -40;
camera.position.z = 40;
camera.position.y = 20;

scene = new THREE.Scene();
scene.background = new THREE.Color(0x8cc7de);

const bulbGeometry = new THREE.SphereGeometry(0.2, 16, 8); // 球體
const bulbLight = new THREE.PointLight(0xffee88, 1, 100, 2); // 點(diǎn)光源
const bulbMat = new THREE.MeshStandardMaterial({
  emissive: 0xffffee, // 材質(zhì)的放射（光）顏色，基本上是不受其他光照影響的固有顏色
  emissiveIntensity: bulbLight.intensity / Math.pow(0.02, 2.0), // 放射光強(qiáng)度,將光源表面的強(qiáng)度轉(zhuǎn)換為輻照度
  color: 0x000000,
});
bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat)); // 在光源的位置添加一個(gè)有反射光的球體
bulbLight.position.set(-14, 20, -14);
bulbLight.castShadow = true; // 這個(gè)光源照射的對(duì)象是否有陰影
bulbLight.power = 20000; // 光功率
scene.add(bulbLight);

const hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 0.02);
hemiLight.intensity = 5; // 半球光的光照強(qiáng)度
scene.add(hemiLight);

const floorMat = new THREE.MeshStandardMaterial({
  color: 0xa9a9a9, // 材質(zhì)的顏色
});
const floorGeometry = new THREE.BoxGeometry(300, 300, 0.01, 1, 1, 1);
const floorMesh = new THREE.Mesh(floorGeometry, floorMat);
floorMesh.receiveShadow = true;
floorMesh.rotation.x = -Math.PI / 2.0;
scene.add(floorMesh);

const cubeMat = new THREE.MeshStandardMaterial({
  color: 0xff0000,
});
const boxGeometry = new THREE.BoxGeometry(5, 5, 5);
const boxMesh = new THREE.Mesh(boxGeometry, cubeMat);
boxMesh.position.set(-1, 2.49, -1);
boxMesh.castShadow = true; // 顯示陰影
scene.add(boxMesh);

renderer = new THREE.WebGLRenderer();
renderer.physicallyCorrectLights = true; // 是否使用物理上正確的光照模式
renderer.outputEncoding = THREE.sRGBEncoding; // 定義渲染器的輸出編碼
renderer.shadowMap.enabled = true; // 允許在場(chǎng)景中使用陰影
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio(window.devicePixelRatio); // 設(shè)置設(shè)備像素比
renderer.setSize(window.innerWidth - 201, window.innerHeight); // 將輸出canvas的大小調(diào)整為(width, height)
renderer.toneMappingExposure = 0.2; // 色調(diào)映射的曝光級(jí)別
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 1; // 你能夠?qū)⑾鄼C(jī)向內(nèi)移動(dòng)多少
controls.maxDistance = 100; // 你能夠?qū)⑾鄼C(jī)向外移動(dòng)多少

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}