html创建一个可以浏览3D模型的页面
时间: 2023-12-21 09:05:28 浏览: 124
<!DOCTYPE html>
<html>
<head>
<title>3D Model Viewer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas{
width: 100%;
height: 100%;
background-color: #f1f1f1;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@babylonjs/core@4.2.0/babylon.max.js">
</script>
<script>
window.addEventListener('DOMContentLoaded', function(){
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2}, scene);
var material = new BABYLON.StandardMaterial('sphereMaterial', scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);
sphere.material = material;
return scene;
}
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
window.addEventListener('resize', function(){
engine.resize();
});
});
</script>
</body>
</html>
阅读全文