How do I use php with three js

Questions
1

Hi, 3 weeks ago I finished Bruno Simon’s course and I was wondering how to include three.js in my project, which was in PHP, so I spent almost 2 weeks now trying to figure it. I didn’t find any video on Youtube that might help me. I tried using webpack as Bruno answered me on the help section in discord but the import didn’t work and also could not use a dev server, I had to built the project and replace the htdocs xampp files everytime wich was very tedious. This is the code from the webpack project:

index.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
</head>
<body>
    <script src="bundle.js"></script>
    <canvas class="webgl"></canvas>
</body>
</html>

index.js:

import './main.css';
import * as THREE from 'three';

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const width = 800
const height = 600

// Scene
const scene = new THREE.Scene()

// Object
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000'
})
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cubeMesh)

// Camera
const camera = new THREE.PerspectiveCamera(75, width / height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(width, height)
renderer.render(scene, camera)

And a photo of it to see it more clear:
image

Please if you need more information about the code tell me. Thanks

2

everything you see in /dist is self contained, you can upload it everywhere. there are no imports in that code any longer. so just include the bundle.js with a script tag, give your html a canvas, root tag whatever (look into dist/index.html) and it will work. may i ask though, for what do you need php? hard to imagine spending 2 weeks making a website show. is it possible to throw it out?

3

Hey, first of all, thanks for your assistance, well what I meant with " the import didn’t work" was that even after using ``npm install --save three , the import * as THREE from ‘three’; ``` on index.js was not working properly because nothing showed up on the screen and that code im sure that was nothing wrong with it since it was on Bruno’s course. And I made a website, well, started it, some months ago just to use what I learnt and try to make it as nice and clean as possible, so I thought that including three.js using what I learnt from the course would be great. As I said, on the course, everything was done using webpack while my website didn’t, and the main file was index.php because I need it to retrieve some things from a MySQL database. I thought that adapting my project to webpack would be great since I read on a forum that it optimises the code, but anyways I am just trying on “draft” projects like this one until I find the way to adapt my real project to webpack.

4

(/cc javascript - How do I use PHP with three js - Stack Overflow)

5

I think that “how to use php with three.js” might be the wrong question to get answers that are helpful to you. JavaScript files are static content from a webserver’s perspective, it doesn’t particularly matter what JS libraries (three.js or otherwise) you are using.

In the past I have used NGINX to serve static files along with a PHP server, but there are many other ways of serving static content associated with a PHP server.

7

Hey guys nevermind, I am just an idiot, you just have to make your project normally, and then once you build it, you can just change your index.html file to index.php and it works fine

8

HI I need your help… I am facing the same issue & I don’t know how can I solve this issue. I have my website in php. I make parallax particles file via using three.js in html when I convert it in php its not working, it’s not showing ay thing just showing black screen. On localhost it showing errors.

9

Show your code

10

Here is code, when I change its extension from html to php, its stop working.

<head>

    <title>three.js webgl - effects - parallax barrier</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
body { margin: 0; background-color: #000; color: #fff; font-family: Monospace; font-size: 13px; line-height: 24px; overscroll-behavior: none; } a { color: #ff0; text-decoration: none; } a:hover { text-decoration: underline; } button { cursor: pointer; text-transform: uppercase; } #info { position: absolute; top: 0px; width: 100%; padding: 10px; box-sizing: border-box; text-align: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 1; /* TODO Solve this in HTML */ } a, button, input, select { pointer-events: auto; } .lil-gui { z-index: 2 !important; /* TODO Solve this in HTML */ } @media all and ( max-width: 640px ) { .lil-gui.root { right: auto; top: auto; max-height: 50%; max-width: 80%; bottom: 0; left: 0; } } #overlay { position: absolute; font-size: 16px; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,0,0,0.7); } #overlay button { background: transparent; border: 0; border: 1px solid rgb(255, 255, 255); border-radius: 4px; color: #ffffff; padding: 12px 18px; text-transform: uppercase; cursor: pointer; } #notSupported { width: 50%; margin: auto; background-color: #f00; margin-top: 20px; padding: 10px; } 
</head>

<body>

    <!-- <div id="info">

        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier<br/>

        skybox by <a href="https://www.pauldebevec.com/" target="_blank" rel="noopener">Paul Debevec</a>

    </div> -->

    <script type="module">

        import * as THREE from '../build/three.module.js';

        import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';

        let container, camera, scene, renderer, effect;

        const spheres = [];

        let mouseX = 0;

        let mouseY = 0;

        let windowHalfX = window.innerWidth / 2;

        let windowHalfY = window.innerHeight / 2;

        document.addEventListener( 'mousemove', onDocumentMouseMove );

        init();

        animate();

        function init() {

            container = document.createElement( 'div' );

            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );

            camera.position.z = 3;

            camera.focalLength = 3;

            const path = "textures/cube/pisa/";

            const format = '.png';

            const urls = [

                path + 'px' + format, path + 'nx' + format,

                path + 'py' + format, path + 'ny' + format,

                path + 'pz' + format, path + 'nz' + format

            ];

            const textureCube = new THREE.CubeTextureLoader().load( urls );

            scene = new THREE.Scene();

            // scene.background = textureCube;

            const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );

            const material = new THREE.MeshBasicMaterial( { color: 0xd6b37c, envMap: textureCube } );

            for ( let i = 0; i < 100; i ++ ) {

                const mesh = new THREE.Mesh( geometry, material );

                mesh.position.x = Math.random() * 10 - 5;

                mesh.position.y = Math.random() * 10 - 5;

                mesh.position.z = Math.random() * 10 - 5;

                mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

                scene.add( mesh );

                spheres.push( mesh );

            }

            //

            renderer = new THREE.WebGLRenderer();

            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            const width = window.innerWidth || 2;

            const height = window.innerHeight || 2;

            effect = new ParallaxBarrierEffect( renderer );

            effect.setSize( width, height );

            //

            window.addEventListener( 'resize', onWindowResize );

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;

            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            effect.setSize( window.innerWidth, window.innerHeight );

        }

        function onDocumentMouseMove( event ) {

            mouseX = ( event.clientX - windowHalfX ) / 100;

            mouseY = ( event.clientY - windowHalfY ) / 100;

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            render();

        }

        function render() {

            const timer = 0.0001 * Date.now();

            camera.position.x += ( mouseX - camera.position.x ) * .05;

            camera.position.y += ( - mouseY - camera.position.y ) * .05;

            camera.lookAt( scene.position );

            for ( let i = 0, il = spheres.length; i < il; i ++ ) {

                const sphere = spheres[ i ];

                sphere.position.x = 5 * Math.cos( timer + i );

                sphere.position.y = 5 * Math.sin( timer + i * 1.1 );

            }

            effect.render( scene, camera );

        }

    </script>

</body>
11

Whech errors?

13

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

14

Hi LourentsVlogs, I’m having the same problem you had… so, when you test with localhost it doesn’t work but when you build it, will it work normally?