I am new to new features of HTML5.
Is it possible to embed existing webgl page to my page?
Am I going to the right direction?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var camera, scene, loader;
function init() {
scene = new THREE.Scene();
camera = new THREE.perspectiveCamera();
loader = new THREE.ImageLoader("http.......");
scene.add(camera);
scene.add(loader);
}
</script>
Thanks
You have to use ImageUtils if you want to add an image as texture.
var texture = THREE.ImageUtils.loadTexture( "textures/pic.png" );
var material = new THREE.MeshPhongMaterial( { map: texture } );
// you can edit texture settings
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 512, 512 );
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
If you have another three.js scene and you want to load that into your application, have a look at the loader / scene example from three.js.
If you want to embed a whole page, you could consider using the iframe-Tag.
<iframe src="http..."></iframe>
Related
I'm trying to load a 3D model on the screen but the screen is black, and sometimes I receive an error depending on the way I try to implement my code.
Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>T1 CG</title>
</head>
<body>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</body>
<script src="./lib/threejs/build/three.min.js"></script>
<script src="./lib/threejs/examples/js/loaders/GLTFLoader.js"></script>
<script src="./poke.js"></script>
</html>
Here is my javascript file:
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);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var loader = new THREE.GLTFLoader();
loader.load('./assets/Squirtle/Squirtle.gltf', function(gltf) {
scene.add( gltf );
});
When I try to run like that, I receive the following error: THREE.Object3D.add: object not an instance of THREE.Object3D. But when I try to do something like scene.add(gltf.scene), I don't receive any error but the screen turns black and nothing happens.
Hope that somebody can help me, I'll appreciate it!
Thanks in advance.
Have you tried adding any lights to your scene? Most materials need to be illuminated in order to be visible. You can try a simple AmbientLight:
var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );
Also make sure your camera is positioned a little far from the origin, otherwise the loaded .gltf and the camera will both be occupying the same spot. For instance, if the object is 2 units wide, you could place your camera 5 units away:
camera.position.z = 5;
How does one get the current geometry of an animated mesh? Say I have a mesh that's going through some animation and I want to grab a copy of the current pose and create a new mesh using it (not necessarily skinned the same way), how would I do this?
Edit: Here is a simple example. It loads one of the three.js example animations and runs it. The loaded mesh is skinnedMesh. Every time animate() is called, a copy of the mesh is made using skinnedMesh.geometry. The copy is called newMesh, and it's created with a simple red MeshBasicMaterial and offset to one side of the original.
If you run the code, you'll see that although skinnedMesh is animated, newMesh is always a copy of the untransformed geometry. If it was doing what I wanted it to do, newMesh would be in the same pose as skinnedMesh.
Clearly this particular example is very inefficient, as I could just make another copy of skinnedMesh and animate it separately. But that's not what I want to do. I want to be able to grab the state of the animated mesh at any point in time and make a copy of the pose it happens to be in at that moment.
I hope this makes everything clearer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"> </script>
<script>
var container;
var camera, scene, renderer, loader, clock, light;
var skinnedMesh, animation, groundMaterial, planeGeometry, mixer;
var newMesh = null;
var loaded = false;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(10, 0, 10);
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
clock = new THREE.Clock;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
groundMaterial = new THREE.MeshPhongMaterial({
emissive: 0x010101
});
planeGeometry = new THREE.PlaneBufferGeometry(16000, 16000);
ground = new THREE.Mesh(planeGeometry, groundMaterial);
ground.position.set(0, -5, 0);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
light = new THREE.HemisphereLight(0x777777, 0x003300, 1);
light.position.set(-80, 500, 50);
scene.add(light);
loader.load('http://threejs.org/examples/models/skinned/simple/simple.js', function(geometry, materials) {
for (var k in materials) {
materials[k].skinning = true;
}
skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
skinnedMesh.scale.set(1, 1, 1);
skinnedMesh.position.y = 0;
scene.add(skinnedMesh);
mixer = new THREE.AnimationMixer(skinnedMesh);
mixer.addAction(new THREE.AnimationAction(skinnedMesh.geometry.animations[0]));
camera.lookAt(skinnedMesh.position);
loaded = true;
});
}
function animate() {
requestAnimationFrame(animate);
if (!loaded) {
return;
}
if (mixer) mixer.update(clock.getDelta());
if (newMesh) {
scene.remove(newMesh);
}
newMesh = new THREE.Mesh(skinnedMesh.geometry,
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
newMesh.position.x = skinnedMesh.position.x - 6;
scene.add(newMesh);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
You can directly reference the geometry property of a Mesh Object which contains an array of faces.
Manipulating the geometry ad-hoc is an adventure onto itself, but the structure should be clear enough.
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var mesh = new THREE.Mesh(geometry, material);
console.log(mesh.geometry)
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
Bones don't affect the geometry in memory, their matrices are being applied to geometry in a shader during the rendering and that geometry can't be accessed from JS level.
You have to bake the current pose into positions and also to normals, implementation: https://stackoverflow.com/a/66404012/696535
I am reading this getting started https://aerotwist.com/tutorials/getting-started-with-three-js/.
I get the following error message,
ReferenceError: sphereMaterial is not defined
instead a sphere should show up.
What I have is a copy of three from http://threejs.org/build/three.min.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Try</title>
</head>
<body>
<div id="scene"><p>yo</p></div>
<script src="three.min.js"></script>
<script src="main.js"></script>
</body>
</html>
and main.js
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
// add the camera to the scene
scene.add(camera);
// the camera starts at 0,0,0
// so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
document.getElementById("scene").appendChild(renderer.domElement);
// set up the sphere vars
var radius = 50,
segments = 16,
rings = 16;
// create a new mesh with
// sphere geometry - we will cover
// the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Well, you don't seem to be paying attention to the tutorial. Your JS obviously lacks any variable called sphereMaterial and had you searched your tutorial for that variable, you'd have seen this piece of code that you have not copied over to your script:
// create the sphere's material
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});
It seems that with OrthographicCamera, if a particle (Points) is closer to the camera it will just appear to be larger. While, for example, BoxGeometrys with same size will always be in the same size, regardless of their distances to the camera.
See the sample below, where the green & red cubes have the same size but different distances to camera, so do the two white particles:
var container, camera, controls, scene, renderer;
init();
animate();
function init() {
var container = document.getElementById('container');
camera =
new THREE.OrthographicCamera(-window.innerWidth / 2,
window.innerWidth / 2, -window.innerHeight / 2,
window.innerHeight / 2, 1, 400);
camera.position.z = 200;
controls = new THREE.OrthographicTrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
var light = new THREE.DirectionalLight()
light.position.set(1, 5, 10)
scene.add(light);
var light = new THREE.DirectionalLight(0xaaaaaa)
light.position.set(-10, -1, -5)
scene.add(light);
var light = new THREE.AmbientLight(0x555555)
scene.add(light);
var pGeo = new THREE.Geometry()
var pVec1 = new THREE.Vector3
var pVec2 = new THREE.Vector3
var a = 80
pGeo.vertices.push(pVec1.fromArray([-a, -a, -a]));
pGeo.vertices.push(pVec2.fromArray([a, a, a]));
scene.add(new THREE.Points(pGeo, new THREE.PointsMaterial({
size: 80
})))
var cGeo = new THREE.BoxGeometry(80, 80, 80);
var MPG1 = new THREE.MeshPhongMaterial({
color: 0xff0000
});
var cMesh1 = new THREE.Mesh(cGeo, MPG1);
cMesh1.position.set(a, -a, -a);
cMesh1.updateMatrix();
scene.add(cMesh1);
var MPG2 = new THREE.MeshPhongMaterial({
color: 0x00ff00
});
var cMesh2 = new THREE.Mesh(cGeo, MPG2);
cMesh2.position.set(-a, a, a);
cMesh2.updateMatrix();
scene.add(cMesh2);
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.render(scene, camera)
render()
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
function render() {
renderer.render(scene, camera);
}
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrthographicTrackballControls.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Particle_Orthographic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
</body>
</html>
I want to know, whether there is something I missed that can make particles behave in the same way as other Geometry with OrthographicCamera.
Because I am trying to visualise some aluminum matrix, OrthographicCamera is quite necessary to demonstrate the uniform crystal structure. Also the matrix would vary from 4^3 to 100^3 in volume (and number of aluminum atoms), so the scene will sort of keep changing size, and other Geometry will make it very slow.
Thanks in advance
When using THREE.PointsMaterial, to prevent the particle size from attenuating (changing size) with distance from the camera, set
material.sizeAttenuation = false;
three.js r.72
I am new to three.js and I have a basic blender scene with 2 different meshes which I have also named. I have managed to import the meshes into three but I would like to know how to reference and manipulate each mesh? is it possible if the 2 meshes are in the same file or should I load mesh1.js, mesh2.js etc?
This is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(0,6,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,-200,100);
scene.add(light);
var light2 = new THREE.PointLight(0xffffff);
light2.position.set(-100,200,100);
scene.add(light2);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "tree-land.js", function( geometry, materials ){
var material = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
The mesh variable you have declared is an Object3D, which can be manipulated using all the methods and properties as seen in the documentation: http://threejs.org/docs/#Reference/Core/Object3D
It looks like the call to JSONLoader.load returns a single geometry and material via the callback, so would not seem to support loading multiple files in a single call or multiple geometries in a single file. You might want to take a look at some of the other loaders for that purpose. I have successfully used the ColladaLoader (not in the documentation). Blender exports to Collada as well. The code is in examples/js/loaders of the repository.