I have two divs that I want to place side-by-side, and one of them contains my THREE.JS window/canvas. Basically, I don't want the THREE.js to take up the entire screen (only 50% of the width or however I adjust it), and so I want to do this with the div I put it in (threejs-container) or with HTML if there's another way. On the left side beside it, I want to be able to put an image or text. For some reason, the renderer canvas is not obeying my div and resizing. How do I fix this?
P.S. I know I can resize it manually using THREE.js, but I also want to be able to easily right-adjust my canvas, so I want to try to avoid doing that. The canvas centers itself on the page, and I also don't know how to change that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VRChat</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<!-- WIP -->
</div>
<!-- This is everything below the nav bar -->
<div class="content-wrapper">
<div class="two-column-wrapper">
<div class="profile-image-wrapper">
<img src="https://data.whicdn.com/images/350807092/original.jpg">
</div>
<div id="threejs-container" style="width: 50%">
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three#0.128.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three#0.128.0/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'https://cdn.skypack.dev/three#0.128.0/examples/jsm/loaders/FBXLoader.js';
let camera, scene, renderer;
init();
animate();
function init() {
// https://www.youtube.com/watch?v=FwcXultcBl4
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set(0, 1.3, 3);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, -50, 100 ); // Adjust the direction from which light shines
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = -100;
dirLight.shadow.camera.left = -120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
// Ground
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false} ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// Model
const loader = new FBXLoader();
loader.load( 'model/minoru_utsugi_v1.8_Quest.fbx', function ( object ) {
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true
}
} );
scene.add(object);
} );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("threejs-container").appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0.8, 0); // Change this to move camera position
controls.update();
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
// Adjust three.js object size on window resize
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
This is my code with Three.js. Here I've written a simple code for a red colored, point light and a textured torus with a simple animation. But I got only a black colored torus rotating.
The things written in this code doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<style>
body{
margin: 0;
background-color: #242424;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from '../build/three.module.js';
import { MeshStandardMaterial } from '../src/materials/MeshStandardMaterial.js';
//scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1000 );
const renderer = new THREE.WebGLRenderer({
alpha : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.TorusGeometry(12,3,140,100);
const texture = new THREE.TextureLoader().load('../examples/textures/golf.jpg');
const light = new THREE.PointLight(0xffffff);
light.position.set(2,3,4);
scene.add(light);
const material = new THREE.MeshStandardMaterial({
color: 0xff0000,
roughness: 0.5,
metalness: 0.75
});
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 60;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
I made a jsfiddle and modified your code in order to work:
https://jsfiddle.net/hrm3ab97/show
Since I used jsfiddle, I provided a full external path for three.js module. That made the torus appear.
In case your phone does not support the default WebGL 2, I changed it to WebGL 1, just remove "1" from 'WebGl1Renderer' to see if it still works.
I moved the light further in order to fully light the torus -unless you wanted to light just its inner ring.
The texture code wasn't complete, so I modified the method that loads the texture and applies the map in order to work -I picked a random texture from three.js examples website as they don't limit cross-origin usage.
If you remove the 'map' from the material you'll see the simple red
material color.
remove 'show' from the jsfiddle link to disable fullscreen and see the code. There is a bug in the stackoverflow editor that prevents the full HTML code to appear, so I omitted it here.
import * as THREE from 'https://threejs.org/build/three.module.js';
//scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 10, 1000 );
const renderer = new THREE.WebGL1Renderer({
alpha : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.TorusGeometry(12,3,140,100);
const map = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshStandardMaterial({
roughness: 0.5,
metalness: 0.75,
map: map,
});
const light = new THREE.PointLight(0xffffff);
light.position.set(20,30,40);
scene.add(light);
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );
camera.position.z = 40;
const animate = function () {
requestAnimationFrame( animate );
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
Hi I am facing a problem on cannot display the 3D model THREE.js GLTFLoader(), the following is my script:
Here is the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>hey</li>
<li>heysda</li>
</ul>
</nav>
<div class="scene"></div>
<script src="./three.min.js"></script>
<script src="./GLTFLoader.js"></script>
<script src="./app.js"></script>
</body>
</html>
here is the js file:
//Variables for setup
let container;
let camera;
let renderer;
let scene;
let house;
function init() {
container = document.querySelector(".scene");
//Create scene
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
const ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(50, 50, 100);
scene.add(light);
//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
//Load Model
let loader = new THREE.GLTFLoader();
loader.load("./house/scene.gltf", function(gltf) {
scene.add(gltf.scene);
house = gltf.scene.children[0];
animate();
});
}
function animate() {
requestAnimationFrame(animate);
house.rotation.z += 0.005;
renderer.render(scene, camera);
}
init();
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", onWindowResize);
I ran the code on notepad++ and chrome browser, but it turned out blank screen without showing my 3D model.
Anyone knows the solution? thanks in advance!
The way how you work with container is problematic since clientHeight is zero when you access it to compute the aspect ratio. I suggest you start with using window.innerWidth and window.innerHeight at the beginning.
Besides, there are two minor issues with your model. The model has an extreme scale so you won't see it with your current camera position. You are way too close. Besides, the model has an offset so it's recommended to center it. Try it with this code:
//Variables for setup
let camera;
let renderer;
let scene;
let house;
init();
function init() {
//Create scene
scene = new THREE.Scene();
const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 0, 5 );
const ambient = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambient );
const light = new THREE.DirectionalLight( 0xffffff, 0.8 );
light.position.set( 0, 0, 10 );
scene.add( light );
//Renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Load Model
const loader = new THREE.GLTFLoader();
loader.load( './house/scene.gltf', function ( gltf ) {
house = gltf.scene;
// scale model down
house.scale.setScalar( 0.001 );
// center it
const box = new THREE.Box3().setFromObject( house );
const center = box.getCenter( new THREE.Vector3() );
house.position.x += ( house.position.x - center.x );
house.position.y += ( house.position.y - center.y );
house.position.z += ( house.position.z - center.z );
scene.add( house );
animate();
} );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize );
I am trying to render a 3D model using Three.js on the browser and also trying to add annotations similar to https://sketchfab.com/3d-models/interactive-test-778258c754a74d37a72d3274b80c6ce1 . I am using https://manu.ninja/webgl-three-js-annotations/ as a reference. I tried following the first half of the article which just adds the screen projections but i dont see any annotations in my model.Would really appreciate any help in understanding what i am missing.
HTML code
<html>
<head>
<title>Cube</title>
<style>
body { margin: 0;}
</style>
</head>
<body>
<div class="annotation">
<p><strong>Cube</strong></p>
<p>Sentence about cube</p>
</div>
<canvas id="number" width="64" height="64"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="/assets/OrbitControls.js"></script>
<script src="http://rawcdn.githack.com/mrdoob/three.js/r99/examples/js/loaders/GLTFLoader.js"></script>
<script src="/examples/3d-obj-loader/scripts_annotation.js"></script>
</body>
</html>
scripts_annotation.js
//global variables
var camera, scene, renderer, controls;
var sprite, spriteBehindObject, model;
init();
render();
//camera set up and model loading
function init(){
//camera settings
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 2, 2000 );
camera.position.set(700,500,1250);
scene = new THREE.Scene();
//renderer setting
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setClearColor(0x1E1E1E);
renderer.setClearColor(0xffffff);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
document.body.appendChild( renderer.domElement );
window.addEventListener('resize',onWindowResize, false);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
var loader = new THREE.CubeTextureLoader().setPath( '/examples/3d-obj-loader/reflections/Park2/' );
var background = loader.load( urls );
var light = new THREE.HemisphereLight( 0xffffff, 0xffffff , 5 );
light.position.set( 0, 1, 0 );
scene.add( light );
//model
// Mesh
const cubeGeometry = new THREE.BoxGeometry(500, 500, 500);
mesh = new THREE.Mesh(
cubeGeometry,
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
})
);
const line = new THREE.LineSegments(
new THREE.WireframeGeometry(cubeGeometry),
new THREE.LineBasicMaterial({
color: 0xffffff,
linewidth: 1,
opacity: 0.25,
transparent: true
})
);
scene.add(mesh);
scene.add(line);
}
function onWindowResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render(){
requestAnimationFrame( render );
controls.update();
renderer.render(scene, camera);
updateScreenPosition();
}
function updateScreenPosition() {
const vector = new THREE.Vector3(0, 17, 8);
const canvas = renderer.domElement;
vector.project(camera);
vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));
const annotation = document.querySelector(".annotation");
annotation.style.top = `${vector.y}px`;
annotation.style.left = `${vector.x}px`;
annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
}
Solved this issue by replacing the following line in html file on my local machine
<link rel="stylesheet" href="/examples/3d-obj-loader/Surface_style.scss" type="text/scss"> to <link rel="stylesheet" href="/examples/3d-obj-loader/Surface_style.scss" type="text/css">
This line was the only difference between the codepen and code on my local machine
I am trying to add Orbit Controls to my scene without success. The code below keeps giving me an error Uncaught TypeError: THREE.OrbitControls is not a constructor. I have tried different solutions I came across the web but, the error still persists. What am I doing wrong?
Pseudocode
Add Orbit Controls
Be able to use Orbit Controls in the scene
Thank you in advance.
Codepen
HTML
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="https://82mou.github.io/threejs/js/OrbitControls.js"></script>
</body>
</html>
JS
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// var renderer = new THREE.WebGLRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
// CAMERA
var camera = new THREE.PerspectiveCamera(75, 320 / 240, 1, 1000);
camera.position.set(250, 200, 250);
camera.lookAt(0, 0, 0);
// add controls for the camera
var controls = new THREE.OrbitControls(camera);
var geometry = new THREE.PlaneGeometry(100, 50);
var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
camera.position.z = 200;
var animate = function () {
requestAnimationFrame( animate );
controls.update();
// plane.rotation.x += 0.01;
// plane.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
There is an issue in your codepen. When you import OrbitControls via ES6 imports, it's not necessary to use the THREE namespace. So when doing something like this:
import { OrbitControls } from "https://unpkg.com/three#0.112/examples/jsm/controls/OrbitControls.js";
you have to to create OrbitControls like so:
controls = new OrbitControls( camera, renderer.domElement );
Live example: https://jsfiddle.net/68kzagry/1/
I'm trying to implement this 3D model viewer, however I want to embed it into an already set div instead of making a new one as this does. So I've edited the code like so but it hasn't worked. Any help would be appreciated.
<script>
// This is where our model viewer code goes.
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = document.getElementById('viewer').clientHeight / 2;
var windowHalfY = document.getElementById('viewer').clientHeight / 2;
init();
animate();
// Initialize
function init() {
// This <div> will host the canvas for our scene.
container = document.getElementById( 'viewer' );
//document.body.appendChild( container );
// You can adjust the cameras distance and set the FOV to something
// different than 45°. The last two values set the clippling plane.
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// These variables set the camera behaviour and sensitivity.
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
// This is the scene we will add all objects to.
scene = new THREE.Scene();
// You can set the color of the ambient light to any value.
// I have chose a completely white light because I want to paint
// all the shading into my texture. You propably want something darker.
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
// Uncomment these lines to create a simple directional light.
// var directionalLight = new THREE.DirectionalLight( 0xffeedd );
// directionalLight.position.set( 0, 0, 1 ).normalize();
// scene.add( directionalLight );
// Texture Loading
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
// You can set the texture properties in this function.
// The string has to be the path to your texture file.
loader.load( 'img/sickletexture.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
// I wanted a nearest neighbour filtering for my low-poly character,
// so that every pixel is crips and sharp. You can delete this lines
// if have a larger texture and want a smooth linear filter.
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestMipMapLinearFilter;
} );
// OBJ Loading
var loader = new THREE.OBJLoader( manager );
// As soon as the OBJ has been loaded this function looks for a mesh
// inside the data and applies the texture to it.
loader.load( 'obj/sickle.obj', function ( event ) {
var object = event;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
// My initial model was too small, so I scaled it upwards.
object.scale = new THREE.Vector3( 2, 2, 2 );
// You can change the position of the object, so that it is not
// centered in the view and leaves some space for overlay text.
object.position.y -= 2.5;
scene.add( object );
});
// We set the renderer to the size of the window and
// append a canvas to our HTML page.
renderer = new THREE.WebGLRenderer();
renderer.setSize( document.getElementById('viewer').innerWidth, document.getElementById('viewer').innerHeight );
container.appendChild( renderer.domElement );
}
// The Loop
function animate() {
// This function calls itself on every frame. You can for example change
// the objects rotation on every call to create a turntable animation.
requestAnimationFrame( animate );
// On every frame we need to calculate the new camera position
// and have it look exactly at the center of our scene.
controls.update();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
I'm trying to get things to work myself and this code works for me with the latest version (66) of three. Its a little different to you example as I am using a vrml model rather than an obj and I handle the material differently. But it does run fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - vrml loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
threewindow {
border: 1px solid black;
}
</style>
<script src="../three.js/build/three.min.js"></script>
<script src="../three.js/examples/js/controls/TrackballControls.js"></script>
<script src="../three.js/examples/js/loaders/VRMLLoader.js"></script>
<script src="../three.js/examples/js/Detector.js"></script>
<script src="../three.js/examples/js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
function init() {
alert("init");
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
scene.add( camera );
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//child.material.map = texture;
//child.material = sphereMaterial;
child.material.side = THREE.DoubleSide;
}
} );
scene.add(object);
} );
// loader.load( "models/vrml/house.wrl" );
loader.load( "cayley.wrl" );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(200, 200);
document.getElementById("threewindow").appendChild(renderer.domElement);
// container = document.createElement( 'div' );
// document.body.appendChild( container );
// container.appendChild( renderer.domElement );
// stats = new Stats();
// stats.domElement.style.position = 'absolute';
// stats.domElement.style.top = '0px';
// container.appendChild( stats.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
//stats.update();
}
</script>
</head>
<body onload="init()">
<h1>Cubic surfaces</h1>
<p>All the surfaces defined by cubics equations.</p>
<ul><li>Singularities of cubic surfaces.</li>
<li>A pictorial introduction to singularity theory.</li>
</ul>
<div id="threewindow"></div>
</body>
</html>
I found a rather easy solution, I'm surprised I did not find it earlier.
Create the 3D in a seperate html document (using the original script, not the edited one in the OP), then in the div <embed src="3d.html"></embed>