我正在創建一個vscode擴展，我想在其中可視化 3D 網格。在我獲取 HTML 內容的函式下方：
function getWebviewContent(context: vscode.ExtensionContext, panel: vscode.WebviewPanel) {
const threejs = vscode.Uri.file(context.extensionPath "/js/three.js");
const threejsUri = panel.webview.asWebviewUri(threejs);
const geometryjs = vscode.Uri.file(context.extensionPath "/js/geometry.js");
const geometryjsUri = panel.webview.asWebviewUri(geometryjs);
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src=${threejsUri}></script>
<script src=${geometryjsUri}></script>
</body>
</html>
`
}
現在如果我geometry.js是
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x = 0.01;
cube.rotation.y = 0.01;
renderer.render( scene, camera );
};
animate();
它按預期作業。但是，如果我用它來上課：
import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh, requestAnimationFrame } from 'three';
class Viewer {
constructor() {
this.scene = new Scene();
this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.renderer = new WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
this.geometry = new BoxGeometry();
this.material = new MeshBasicMaterial( { color: 0x00ff00 } );
this.cube = new Mesh( this.geometry, this.material );
this.scene.add( cube );
this.camera.position.z = 5;
}
animate() {
requestAnimationFrame( this.animate );
this.cube.rotation.x = 0.01;
this.cube.rotation.y = 0.01;
this.renderer.render( this.scene, this.camera );
}
}
let viewer = new Viewer();
viewer.animate();
HTML 頁面為空。我在這里做錯了什么？我依賴于使用類的外部包進行渲染，因此我需要了解如何在此處正確創建和使用這些類。
編輯：我已更改geometry.js為typescript，但仍然沒有運氣
import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';
export class Viewer {
private scene!: Scene;
private camera: PerspectiveCamera;
private renderer: WebGLRenderer;
private geometry: BoxGeometry;
private material: MeshBasicMaterial;
private cube: Mesh;
constructor(document: Document) {
this.scene = new Scene();
this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.renderer = new WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( this.renderer.domElement );
this.geometry = new BoxGeometry();
this.material = new MeshBasicMaterial( { color: 0x00ff00 } );
this.cube = new Mesh( this.geometry, this.material );
this.scene.add( this.cube );
this.camera.position.z = 5;
this.animate();
}
public animate() {
requestAnimationFrame( this.animate );
this.cube.rotation.x = 0.01;
this.cube.rotation.y = 0.01;
this.renderer.render( this.scene, this.camera );
}
}
new Viewer(document);
編輯2：奇怪的是，這樣的事情
function init() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x = 0.01;
cube.rotation.y = 0.01;
renderer.render( scene, camera );
};
animate();
}
window.addEventListener('message', (event) => {
init();
});
我不明白這里發生了什么。為什么animate()函式必須在里面init()？在一個類中，這不是通過使用this成員來實作的嗎？
編輯3：
class Viewer {
constructor() {
this.init();
}
init() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
this.cube = new THREE.Mesh( geometry, material );
this.scene.add( cube );
this.camera.position.z = 5;
this.boundAnimate = this.animate.bind(this);
this.animate(); // this.boundAnimate();
}
animate() {
requestAnimationFrame(this.boundAnimate);
this.cube.rotation.x = 0.01;
this.cube.rotation.y = 0.01;
this.renderer.render( this.scene, this.camera );
}
}
let viewer = new Viewer();
uj5u.com熱心網友回復：
requestAnimationFrame嘗試在window物件 ( this === window) 的背景關系中呼叫提供的函式。
當您以功能方式運行代碼時（您的原始和編輯 2 方法），某些物件的范圍是這樣的，您仍然可以在函式內訪問它們animate。但是當您使用該類并requestAnimationFrame呼叫this.animate時，它會第一次作業，但第二次您this變成window并且您的程式已經偏離軌道。
為了糾正這個問題，我通常將函式系結到背景關系以防止覆寫。您也call可以直接使用它并提供您要使用的背景關系。
使用函式系結
class MyClass{
constructor(){
this.boundAnimate = this.animate.bind(this);
}
animate(){
requestAnimationFrame(this.boundAnimate);
}
};
使用call
class MyClass{
animate(){
window.prototype.requestAnimationFrame.call(this, this.animate);
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/435285.html
標籤：javascript 视觉工作室代码 三.js vscode 扩展