three打造3d礼盒礼物点击破碎效果

代码语言:html

所属分类:三维

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	margin: 0;
	overflow: hidden;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script >
window.addEventListener("DOMContentLoaded", app);

function app() {
  var scene,
  camera,
  renderer,
  present,
  raycaster = new THREE.Raycaster(),
  intersects,
  pointer = new THREE.Vector2(),

  init = () => {
    // setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xf98686));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // present
    present = new Present(12, 7);
    scene.add(present.mesh);

    // ambient light
    let ambientLight = new THREE.AmbientLight(0xffffff);
    ambientLight.name = "Ambient Light";
    scene.add(ambientLight);

    // directional light
    let directionLight = new THREE.DirectionalLight(0xffffff, 0.7);
    directionLight.name = "Directional Light";
    directionLight.position.set(10, 20, 0);
    directionLight.castShadow = true;
    directionLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    scene.add(directionLight);

    // camera
    camera.position.set(30, 30, 30);
    camera.lookAt(scene.position);

    /.........完整代码请登录后点击上方下载按钮下载查看

网友评论0