14、拖动文件到场景中

创建日期：2024-07-08
更新日期：2025-01-12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>14_拖动文件到场景中</title>
    <link href="../css/index.css" rel="stylesheet" />
    <style>
        #holder {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            width: 150px;
            height: 150px;
            border: 10px solid #666;
        }

            #holder:hover {
                border: 10px solid #ccc;
            }
    </style>
    <script src="../libs/three.js"></script>
</head>
<body>
    <div id="holder"></div>
    <script>
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(20, 20, 20);
        camera.lookAt(scene.position);

        var geometry = new THREE.BoxGeometry(10 * Math.random(), 10 * Math.random(), 10 * Math.random());
        var material = new THREE.MeshBasicMaterial();
        material.map = THREE.ImageUtils.loadTexture('../assets/textures/debug.png');
        var box = new THREE.Mesh(geometry, material);
        scene.add(box);

        var render = function () {
            requestAnimationFrame(render);
            box.rotation.x += 0.01;
            box.rotation.y += 0.01;
            box.rotation.z += 0.01;
            renderer.render(scene, camera);
        }

        // 拖动文件
        var holder = document.getElementById('holder');
        holder.ondragover = function () {
            this.className = 'hover';
            return false;
        }
        holder.ondragend = function () {
            this.className = '';
            return false;
        }
        holder.ondrop = function (e) {
            this.className = '';
            e.preventDefault();
            var file = e.dataTransfer.files[0];
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(event.target);
                console.log(event);
                holder.style.background = 'url(' + event.target.result + ') no-repeat center';

                var image = document.createElement('img');
                image.src = event.target.result;
                var texture = new THREE.Texture(image);
                texture.needsUpdate = true;
                box.material.map = texture;
            };
            reader.readAsDataURL(file);
        }

        render();
    </script>
</body>
</html>
简介

一个来自三线小城市的程序员开发经验总结。
14、拖动文件到场景中

简介

最新修改

导航
