Three.js start point
How do I make an three.js start point?
What is a three.js start point? How do you make a three.js start point? This script and codes were developed by Wenting Zhang on 07 November 2022, Monday.
Three.js start point - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three.js start point</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Three.js start point - Script Codes CSS Codes
body { margin: 0;
}
canvas { width: 100%; height: 100%
}
Three.js start point - Script Codes JS Codes
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 material = new THREE.MeshBasicMaterial({ color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera);
}
render();
Developer | Wenting Zhang |
Username | wentin |
Uploaded | November 07, 2022 |
Rating | 3 |
Size | 1,866 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Comedy Central Loading SVG | 7,744 Kb |
ResponsifyJS demo | 5,586 Kb |
100 days of research | 7,754 Kb |
Algorithmic Animation javascript template | 1,865 Kb |
Draw Eye Icon with Pure CSS | 1,552 Kb |
Pure css solution to responsive background image | 1,499 Kb |
Getting x-height and descender line | 2,822 Kb |
SVG Animation | 30,040 Kb |
Responsify images | 2,140 Kb |
Guitar string | 3,001 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 Form | Tusharbandal | 1,836 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!