<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="three.min.js" type="text/javascript"></script>
<script src="OrbitControls.js"></script>
<style>
body {
font-family: Monospace;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var scene, camera, renderer;
scene = new THREE.Scene();
/* 相机 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
//创建相机对象
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(0, 300, 400); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
function transparentObject(geometry, material) {
var obj = new THREE.Object3D();
var mesh = new THREE.Mesh(geometry, material);
mesh.material.side = THREE.BackSide; // back faces
mesh.renderOrder = 0;
obj.add(mesh);
var mesh = new THREE.Mesh(geometry, material.clone());
mesh.material.side = THREE.FrontSide; // front faces
mesh.renderOrder = 1;
obj.add(mesh);
return obj
}
let url = 'test-1.png'
const textureLoader = new THREE.TextureLoader();
var map = textureLoader.load(url);
map.repeat.x = 2;
var geo = new THREE.CylinderGeometry(10, 10, 30, 50, 1, true);
geo.translate(0, 15, 0);
var material = new THREE.MeshStandardMaterial({
transparent: true,
map,
opacity: 1,
});
let renderObject = transparentObject(geo, material);
scene.add(renderObject)
var ambient = new THREE.AmbientLight(0xffffff,1);
ambient.position.set(0,0,0);
scene.add(ambient);
var axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
/* 渲染器 */
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//controls.autoRotate = true;
createFloor();
/* 循环渲染 */
function animate() {
renderObject.scale.x += 0.12
renderObject.scale.z += 0.12
if (renderObject.scale.x > 10) {
renderObject.scale.x = 1
renderObject.scale.z = 1
}
controls.update()
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
/* 初始加载 */
(function () {
animate();
})();
//创建地板
function createFloor(){
var loader = new THREE.TextureLoader();
loader.load("test-0.jpg",function(texture){
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 50, 50);
var floorGeometry = new THREE.BoxGeometry(2600, 1400, 1);
var floorMaterial = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
floor.name = "地面";
scene.add(floor);
});
}
</script>
</body>
</html>
