首頁猿問三.js...

三.js CSS3DRenderer 場景變成一個div

JavaScript

Cats萌萌 2022-10-13 14:33:46

我想使用 Three.js CSS3DRenderer 來構建一個三維構圖。這是我的代碼："use strict";var OrbitControls = THREE.OrbitControls, CSS3DRenderer = THREE.CSS3DRenderer, CSS3DObject = THREE.CSS3DObject, Scene = THREE.Scene, PerspectiveCamera = THREE.PerspectiveCamera, Mesh = THREE.Mesh, PlaneGeometry = THREE.PlaneGeometry, MeshPhongMaterial = THREE.MeshPhongMaterial, Color = THREE.Color, DoubleSide = THREE.DoubleSide, NoBlending = THREE.NoBlending, WebGLRenderer = THREE.WebGLRenderer, MeshBasicMaterial = THREE.MeshBasicMaterial;var CSS3DDemo = /** @class */ (function() { function CSS3DDemo() { this.scene = new Scene(); this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500); this.webGLRenderer = new WebGLRenderer(); this.css3DRenderer = new CSS3DRenderer(); this.controls = new OrbitControls(this.camera, this.css3DRenderer.domElement); this.camera.position.set(0, 0, 20); this.webGLRenderer.setSize(window.innerWidth, window.innerHeight); this.webGLRenderer.setClearColor(0xFFFFFF); this.css3DRenderer.setSize(window.innerWidth, window.innerHeight); this.css3DRenderer.domElement.style.top = '0px'; this.css3DRenderer.domElement.style.left = '0px'; this.css3DRenderer.domElement.style.position = 'absolute'; var div = window.document.createElement('div'); div.innerHTML = "this is content"; div.style.width = '160px'; div.style.height = '160px'; div.style.background = 'red'; var object = new CSS3DObject(div); object.position.set(0, 0, 0); object.scale.set(1 / 16, 1 / 16, 1 / 16); this.scene.add(object); var planeGeometry = new PlaneGeometry(10, 10); this.scene.add(this.camera); window.document.body.appendChild(this.webGLRenderer.domElement); window.document.body.appendChild(this.css3DRenderer.domElement); this.render(); }我需要在 id 的 div 中有 Three.JS 3D 場景#content。我已經嘗試了很多，但找不到解決方案。我看過一些教程，但我認為在這種情況下有點不同。有人可以幫我嗎？會很高興的！:)

查看完整描述

1 回答

富國滬深

TA貢獻1790條經驗獲得超9個贊

不確定這是否是您想要的。如果您希望將場景附加到 div #content。您可以使用

document.getElementById("content").appendChild(this.webGLRenderer.domElement)

document.getElementById("content").appendChild(this.css3DRenderer.domElement)

如果您查看元素檢查器，您會注意到 window.document.body.appendChild() 將附加到正文本身而不是 div #content。

而 document.getElementById("content").appendChild() 將追加到 div #content。

"use strict";

var OrbitControls = THREE.OrbitControls,

CSS3DRenderer = THREE.CSS3DRenderer,

CSS3DObject = THREE.CSS3DObject,

Scene = THREE.Scene,

PerspectiveCamera = THREE.PerspectiveCamera,

Mesh = THREE.Mesh,

PlaneGeometry = THREE.PlaneGeometry,

MeshPhongMaterial = THREE.MeshPhongMaterial,

Color = THREE.Color,

DoubleSide = THREE.DoubleSide,

NoBlending = THREE.NoBlending,

WebGLRenderer = THREE.WebGLRenderer,

MeshBasicMaterial = THREE.MeshBasicMaterial;

var CSS3DDemo = /** @class */ (function() {

function CSS3DDemo() {

this.scene = new Scene();

this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);

this.webGLRenderer = new WebGLRenderer();

this.css3DRenderer = new CSS3DRenderer();

this.controls = new OrbitControls(this.camera, this.css3DRenderer.domElement);

this.camera.position.set(0, 0, 20);

this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);

this.webGLRenderer.setClearColor(0xFFFFFF);

this.css3DRenderer.setSize(window.innerWidth, window.innerHeight);

this.css3DRenderer.domElement.style.top = '0px';

this.css3DRenderer.domElement.style.left = '0px';

this.css3DRenderer.domElement.style.position = 'absolute';

var div = window.document.createElement('div');

div.innerHTML = "this is content";

div.style.width = '160px';

div.style.height = '160px';

div.style.background = 'red';

var object = new CSS3DObject(div);

object.position.set(0, 0, 0);

object.scale.set(1 / 16, 1 / 16, 1 / 16);

this.scene.add(object);

var planeGeometry = new PlaneGeometry(10, 10);

this.scene.add(this.camera);

document.getElementById("content").appendChild(this.webGLRenderer.domElement);

document.getElementById("content").appendChild(this.css3DRenderer.domElement);

this.render();

}

CSS3DDemo.prototype.render = function() {

var _this = this;

window.requestAnimationFrame(function() {

return _this.render();

});

this.css3DRenderer.render(this.scene, this.camera);

this.webGLRenderer.render(this.scene, this.camera);

this.controls.update();

};

return CSS3DDemo;

}());

new CSS3DDemo();

html,

body {

width: 100vw;

margin: 0;

height: 100vh;

padding: 0;

overflow: hidden;

border: 0;

}

#content {

width: 60vw;

height: 70vh;

background-color: grey;

}

反對回復 2022-10-13

1 回答
0 關注
115 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

三.js CSS3DRenderer 場景變成一個div

三.js CSS3DRenderer 場景變成一個div

1 回答

添加回答