<script lang="ts">
import { onMount } from 'svelte';
import * as THREE from 'three';
var scene: THREE.Scene;
var camera: THREE.Camera;
var renderer: THREE.Renderer;
let canvasElement: HTMLCanvasElement;
const curve = new THREE.EllipseCurve(0, 0, 10, 5, 0, 2 * Math.PI, false, 0);
onMount(() => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvasElement });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(100));
const material = new THREE.LineBasicMaterial({ color: 0x3f3f46 });
const ellipse = new THREE.Line(geometry, material);
scene.add(ellipse);
camera.position.z = 10;
animate();
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
这是我在svelte组件中的代码片段。我从官方文档中编写了它,但运行它会出现错误error shown by the above code
我尝试记录对象,但它没有显示任何名为setFromPoints的函数,此时丢失
1条答案
按热度按时间krcsximq1#
所以我在svelte REPL中复制了这个,它运行得很好,我做的唯一一件事就是将
canvasElement
绑定到一个实际的DOM画布元素,这可能是您在实现时忽略了的。查看此REPL link.