html threejs默认代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html threejs默认代码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>___title___</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
<meta name="author" content="JeongHo Park, JH Park, jeonghopark">
<style>
body {
background-color: #D0AD99;
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-gradient(linear, bottom, top, from(#9CABC8), to(#D9EEF9));
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image: -webkit-linear-gradient(top, #9CABC8, #D9EEF9);
/* Firefox 3.6 - 15 */
background-image: -moz-linear-gradient(top, #9CABC8, #D9EEF9);
/* Opera 11.1 - 12 */
background-image: -o-linear-gradient(top, #9CABC8, #D9EEF9);
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image: linear-gradient(to top, #9CABC8, #D9EEF9);
margin: 0px;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script type="text/javascript" src="js/three.min.js"></script>
<script>
var scene, camera, renderer;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener( 'resize', onWindowResize, false );
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
cube.name = "cube";
cube.position.z = 0;
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>以上是关于html threejs默认代码的主要内容，如果未能解决你的问题，请参考以下文章