function rendererCommon(canvas) {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(canvas),
antialias: true
}),
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
scene = new THREE.Scene(),
light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
geometry = new THREE.CubeGeometry(100, 100, 100), //(x,y,z) ?,
material = new THREE.MeshLambertMaterial({
color: 0xF3FFE2
});// this material will alow color, the parameter sets the solor of the object
renderer.setClearColor(0x4286f4);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
//WINDOW RESIZE FUNCTION
window.addEventListener("resize", onWindowResize);
function onWindowResize() {
camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
}
scene.add(light);
scene.add(light1);
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//ANIMATION
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.1;
mesh.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
function rendererCommon00(canvas) {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(canvas),
antialias: true
}),
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
scene = new THREE.Scene(),
light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
geometry = new THREE.BoxGeometry(100,100,100,10,10,10);
material = new THREE.PointsMaterial({
size: 6,
color: 0x000000
});// this material will alow color, the parameter sets the solor of the object
renderer.setClearColor(0xc9d5e8);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
//WINDOW RESIZE FUNCTION
window.addEventListener("resize", onWindowResize);
function onWindowResize() {
camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
}
scene.add(light);
scene.add(light1);
let mesh = new THREE.Points(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//ANIMATION
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.002;
mesh.rotation.y += 0.002;
mesh.rotation.z += 0.002;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
function rendererCommon01(canvas) {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(canvas),
antialias: true
}),
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000),
scene = new THREE.Scene(),
light = new THREE.AmbientLight(0xffffff, 0.5), // will light the dark sides of the object;
light1 = new THREE.PointLight(0xffffff, 0.5), //will light the front of the object
//Dodecahedron
geometry = new THREE.BoxGeometry(100,100,100);
material = new THREE.MeshPhongMaterial({
color: 0xF3FFE2
});// this material will alow color, the parameter sets the solor of the object
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
//WINDOW RESIZE FUNCTION
window.addEventListener("resize", onWindowResize);
function onWindowResize() {
camera.aspect = (window.innerWidth * .4) / (window.innerHeight * .4);
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * .4, window.innerHeight * .4);
}
scene.add(light);
scene.add(light1);
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//ANIMATION
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.0001;
mesh.rotation.y += 0.002;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
//Create for myCanvas
rendererCommon('myCanvas');
//Create for myCanvas00
rendererCommon00('myCanvas00');
//Create for myCanvas01
rendererCommon01('myCanvas01');
body{
margin: 0;
overflow: hidden;
}
div{
display: inline-block;
}
canvas{
background: red;
font: 12px, #5673a0;
font-family: verdana;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js" ></script>
<div>
<p>div above myCanvas</p>
<canvas id="myCanvas"></canvas>
</div>
<div>
<p>div above myCanvas00</p>
<canvas id="myCanvas00"></canvas>
</div>
<div>
<p>div above myCanvas01</p>
<canvas id="myCanvas01"></canvas>
</div>
</body>
</html>