Embed the Three.js CSS3DRenderer scene within a designated div element

I am interested in using the Three.js CSS3DRenderer to create a three-dimensional composition.

Here is the code I have:

"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();
  }
  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;
}
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/build/three.min.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js'></script>


<div id="content"></div>

I am trying to incorporate the Three.JS 3D scene into the div with the id #content. Despite looking at tutorials, I have not been able to find a solution. If anyone could help me out, I would greatly appreciate it! :)

javascriptthree.js

Answer №1

Uncertain if this aligns with your requirements. Should the scene be linked to div #content, you have the option to utilize:

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

Upon inspecting the element, bear in mind that window.document.body.appendChild() appends to the body itself and not to div #content.

In contrast, document.getElementById("content").appendChild() will append to 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;
}
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/build/three.min.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script>
<script src='https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js'></script>

<div id="content"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a React component that allows for pagination using data fetched from a

I have a Spring Boot endpoint that retrieves and lists items from a database: @RequestMapping(method = RequestMethod.GET, value = "/task", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<?> processTask(@Valid TaskSearchP ...

javascriptreactjstypescriptspring-bootmaterial-ui

Pausing for the completion of AJAX calls within a $.each loop before proceeding with the function execution

I am looking to trigger a function only once all of the AJAX calls within my $.each loop have finished executing. What is the most effective approach to accomplish this task? function recalculateSeatingChartSeatIds() { var table_id = $(".seatingChar ...

javascriptjqueryajax

Creating interactive PDF files using ReactJS

Is there a way to create a PDF using React that supports styling and allows the content to be hidden on the page? I need to have a link in my app that, when clicked, generates a PDF and opens it in a new tab. I've tried out various packages but none s ...

javascriptreactjspdfjspdfhtml2canvas

Initiating a conversation using a greeting in the Javascript bot framework

I am looking to initiate a multi-level, multiple choice dialog from the welcome message in the Bot Framework SDK using JavaScript. I have a main dialog (finalAnswerDialog) that utilizes LUIS for predicting intents, and a multi-level, multiple choice menu d ...

javascriptazure-bot-service

Using the `map()` method in React's array

I stumbled upon an interesting example at http://codepen.io/lacker/pen/vXpAgj that closely resembles my current issue. Let's consider the following array: [ {category: 'Sporting Goods', price: '$49.99', stocked: true, name: &apo ...

javascriptarraysreactjsmapping

Is Performance Enhanced by Exporting Meshes in Three.js?

Currently, I am working on a Three.js project and have noticed some performance lag in certain areas. The most significant lag occurs when rendering the text Meshes that I have created as follows: var text1Geo = new THREE.TextGeometry("Hello", {font: font ...

javascriptperformancethree.js

The Omniture dashboard is displaying an incorrect URL in My Reports

I am currently exploring the possibility of integrating Omniture into my website. I have received some JavaScript code, but I am unsure whether I should include it on the page or simply add additional parameters to the s object properties. When viewing t ...

javascriptjqueryajaxjquery-mobileadobe-analytics

The functionality of Dnd-kit nested is functioning properly, however, one specific component is unfortunately

Currently, I am dealing with a two-dimensional array that results in two nested dnd-kit drag and drop fields. The nested dnd functions correctly; however, the first one sorts items when moved without any animations (even when moving my div). Below is the ...

javascriptreactjsnext.jsdrag-and-dropdnd-kit

Is it necessary for a component to disconnect from the socket io server upon unmounting?

Is it best practice for a React component to automatically disconnect from a socket.io server when it unmounts using the useEffect hook? If so, could you provide an example of the syntax for disconnecting a React component from a socket.io server? ...

javascriptnode.jsreactjswebsocketsocket.io

obtain the text content from HTML response in Node.js

In my current situation, I am facing a challenge in extracting the values from the given HTML text and storing them in separate variables. I have experimented with Cheerio library, but unfortunately, it did not yield the desired results. The provided HTML ...

javascripthtmlnode.jsparsingweb-scraping

Use CSS media queries to swap out the map for an embedded image

Looking to make a change on my index page - swapping out a long Google Map for an embedded image version on mobile. The map displays fine on desktop, but on mobile it's too lengthy and makes scrolling difficult. I already adjusted the JS setting to "s ...

javascriptcssrubygoogle-mapsmedia-queries

Animating the Three.js Globe camera when a button is clicked

Struggling to create smooth camera movement between two points, trying to implement the function below. Currently working with the Globe from Chrome Experiments. function changeCountry(lat, lng) { var phi = (90 - lat) * Math.PI / 180; var theta = ...

javascriptjquerycamerathree.jstween

What is the best way to create clickable text in an HTML string and set up an @click function in VueJS 2?

I have an array of strings that I want to transform by turning certain words like "User object", "Promise", etc into clickable links. Here is the initial array: var strings = ['This returns a promise containing a User Object that has the id', &a ...

javascriptvue.jsvuejs2event-handlingvue-component

Encountering issues when implementing Parse.Cloud.httpRequest within Express - reporting a lack of success method available

When attempting to access a Facebook graph search URL using Parse Express, I encounter an issue. The request is made using Parse.Cloud.httpRequest. Instead of a successful response, I receive a 500 Internal Server Error. Upon inspecting the logs, I find t ...

javascriptxmljsonexpressparse-platform

Encountered a JavaScriptException while trying to click on an element using Selenium and Python: "arguments[0].click is not a function"

When practicing web scraping, I have been extracting locations from various websites. This particular code helps me pinpoint individual city locations of a hotel brand. However, every time I use driver.execute_script("arguments[0].click();", button) in my ...

javascriptpythonseleniumselenium-webdriverwebdriver

Control the HTML button's state according to the information received from the server

I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...

javascriptjqueryhtmlajaxdatatables

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

Is there a way to access the token variable in another page (api.js)? I need to use it in my index.js. var express = require('express'); var router = express.Router(); router.get('/', function(req, res ...

javascriptnode.jsexpress

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

Neglecting to send a socket signal while assigning a variable to a socket message

In my client-side script, I am using the following snippet: socket.on('bla', function(data) { if (data == ID) { console.log('I don't understand what's happening here.'); } }) socket.on(ID, function(data) { ...

javascriptnode.jssocket.io

Error encountered while attempting to load the vue-sanitize plugin within a Vue.JS application

Hi everyone, I'm encountering a problem with a plugin in Vue that I'm hoping to get some help with. Specifically, I am trying to incorporate vue-sanitize (available here: https://www.npmjs.com/package/vue-sanitize) into my project, but I keep re ...

javascriptnode.jsvue.jswebpack