three中坐标系和几何体，无法展示

Question

为什么我在vue3 + three.js项目中创建坐标系和几何体，我的界面上没有任何内容
下面是我的vue代码

<template>
  <div ref="homeDom" class="home"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const homeDom = ref(null);

import * as THREE from "three";
// 创建场景
const scene = new THREE.Scene();

// 创建摄像机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机(角度,宽高比,近端,远端)

// 设置摄像机位置
camera.position.set = (-30, 40, 30);
// 设置摄像机朝向
camera.lookAt = (scene.position);

// 画线
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xeeeeee));
renderer.setSize(window.innerWidth, window.innerHeight);

// 坐标系
const axes = new THREE.AxesHelper(5);
scene.add(axes);

// 引入几何体
const geometry = new THREE.BoxGeometry(1, 2, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

onMounted(() => {
  // 将渲染器渲染到页面
  homeDom.value.appendChild(renderer.domElement);
  // 渲染
  renderer.render(scene, camera);
});
</script>
<style>
.home {
  width: 100vw;
  height: 100vh;
}
</style>

然后我这里就什么都没有，是一个如下的空白

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题分析：
根据提供的代码，您在Vue 3和Three.js项目中创建了场景、摄像机、坐标系和一个立方体几何体，但是页面上没有显示任何内容。
解决方案：

1. 摄像机设置问题： 在您的代码中，摄像机的位置和朝向设置存在问题。您使用了camera.position.set和camera.lookAt来设置摄像机的位置和朝向，但是您的写法有误。正确的写法是直接赋值给position属性和lookAt方法。修改如下：
   javascriptCopy code

   camera.position.set(-30, 40, 30);
   camera.lookAt(scene.position);
   

2. 添加渲染器到页面： 您在onMounted钩子中将渲染器的DOM元素添加到页面，但是您的渲染器尺寸是根据窗口大小设置的。建议将渲染器的尺寸设置为homeDom的大小，以确保正确显示。修改如下：
   javascriptCopy code

   renderer.setSize(homeDom.value.clientWidth, homeDom.value.clientHeight);
   

3. 修改摄像机视角： 您在透视相机中设置了摄像机的视角为45度，但是如果场景中的物体过大或过小，可能无法正确显示。您可以尝试调整摄像机的位置或视角以确保物体在视野内。您也可以尝试改变立方体的尺寸来看看是否能够显示出来。
   修改后的完整代码如下所示：
   vueCopy code

   <template>
   <div ref="homeDom" class="home"></div>
   </template>
   <script setup>
   import { ref, onMounted } from "vue";
   const homeDom = ref(null);
   import * as THREE from "three";
   const scene = new THREE.Scene();
   const camera = new THREE.PerspectiveCamera(45, 2, 0.1, 1000);
   camera.position.set(-30, 40, 30);
   camera.lookAt(scene.position);
   const renderer = new THREE.WebGLRenderer();
   renderer.setClearColor(new THREE.Color(0xeeeeee));
   renderer.setSize(homeDom.value.clientWidth, homeDom.value.clientHeight);
   const axes = new THREE.AxesHelper(5);
   scene.add(axes);
   const geometry = new THREE.BoxGeometry(1, 2, 1);
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);
   onMounted(() => {
   homeDom.value.appendChild(renderer.domElement);
   renderer.render(scene, camera);
   });
   </script>
   <style>
   .home {
   width: 100vw;
   height: 100vh;
   }
   </style>
   

   请尝试修改后的代码，并重新运行您的项目，查看是否能够正常显示坐标系和立方体。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订