Question

我正在制作我的作品集，我第一次决定使用 vitejs / vuejs + Threejs 组合。

我有第一个问题......我创建了我的画布，我想要一个模块，我将在其中构建一个 3D 场景，我将在后台使用该场景并根据显示的页面进行交互。

我很好地安装了库并导入了我的 js 模块（在 index.html 文件中...这是最好的方法吗？）

首先，我想用红色立方体渲染基本场景，但不幸的是我只有黑屏（例如，它对 alpha 属性反应良好）。但是......我的立方体没有显示，我不明白为什么？！？！？！

控制台没有错误，并且三个实例化得很好...

感谢您的帮助。

import * as THREE from 'three'
console.log(THREE)


/* Create Background Universe in canvas.webgl */

const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

// Sizes
const sizes = {
    width: document.innerWidth,
    height: document.innerHeight
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Canvas
const canvas = document.querySelector('canvas.webgl')

// ...

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    // alpha: true
})
renderer.setSize(sizes.width, sizes.height)

renderer.render(scene, camera)

Answer 1

如果您在定义渲染器的尺寸时使用 window 而不是 document 则效果很好。

/* Create Background Universe in canvas.webgl */

const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000
})
const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Canvas
const canvas = document.querySelector('#webgl')

// ...

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  // alpha: true
})
renderer.setSize(sizes.width, sizes.height)

renderer.render(scene, camera)

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>
<canvas id="webgl"></canvas>

是的，使用 three.js 的 ESM 版本绝对没问题。

- 渲染问题-vitejs+vuejs+threejs

1 个答案: